components.json

{
  "_lib": "./dist/index.js",
  "_templates": {
    "indexDatatable": {
      "description": "Datatable based on an Index",
      "component": "Datatable"
    },
    "recordForm": {
      "description": "Form for saving a record",
      "component": "Form"
    }
  },
  "Body1": {
    "name": "Body1",
    "description": "Sets the font properties as Roboto Body 1",
    "props": {
      "text": "string"
    }, 
    "tags": []
  },
  "Body2": {
    "name": "Body2",
    "description": "Sets the font properties as Roboto Body 2",
    "props": {
      "text": "string"
    }, 
    "tags": []
  },
  "Select": {
    "name": "Select",
    "description": "A material design select (aka Dropdown, aka Combobox)",
    "props": {
      "onSelect": "event",
      "value": "string",
      "width": "string",
      "variant": {
        "type": "options",
        "options": [
          "filled", "outlined"
        ]
      },
      "disabled": "bool",
      "required": "bool",
      "label": "string",
      "helperText": "string",
      "persistent": "bool"
    }
  },
  "List": {
    "name": "List",
    "description": "A Material Design List Component.",
    "props": {
      "onSelect": "event",
      "singleSelection": "bool",
      "variant": {
        "type": "options",
        "options": ["one-line", "two-line"],
        "default": "one-line"
      },
      "inputElement": {
        "type": "options",
        "options": ["None", "Radiobutton", "Checkbox"],
        "default": "None"
      }
    }
  },
  "ListItem": {
    "name": "ListItem",
    "description": "Use as item in a 'List' or 'Select' component",
    "props": {
      "value": "string",
      "text": "string",
      "secondaryText": "string",
      "leadingIcon": "string",
      "trailingIcon": "string",      
      "disabled": "bool",
      "dividerAfter": "bool"
    }
  },
  "Button": {
    "name": "Button",
    "children": false,
    "description": "A Material Design button with different variations. It renders as an anchor if href is passed to it.",
    "props": {
      "onClick": "event",
      "variant": {
        "type": "options",
        "options": ["text", "raised", "unelevated", "outlined"],
        "default": "text"
      },
      "colour": {
        "type": "options",
        "options": ["primary", "secondary"],
        "default": "primary"
      },
      "size": {
        "type": "options",
        "options": ["small", "medium", "large"],
        "default": "medium"
      },            
      "href": "string",
      "icon": "string",
      "trailingIcon": "bool",
      "fullwidth": "bool",
      "text": "string",
      "disabled": "bool"
    },
    "tags": []
  },
  "Caption": {
    "name": "Caption",
    "description": "Sets the font properties as Roboto Caption",
    "props": {
      "text": "string"
    }, 
    "tags": []
  },
  "BasicCard": {
    "name": "BasicCard",
    "description": "This is a basic card",
    "props": {
      "heading": "string",
      "subheading": "string",
      "content": "string",
      "imageUrl": "string",
      "button1Text": "string",
      "button2Text": "string",
      "cardClick": "event",
      "button1Click": "event",
      "button2Click": "event"      
    }
  },
  "Card": {
    "name": "Card",
    "description": "A Material Card container. Accepts CardHeader, CardBody and CardFooter as possible children",
    "props": {
      "width": {"type": "string", "default": "350px"},
      "height": "string",
      "variant": {
        "type": "options",
        "options": ["standard", "outlined"],
        "default": "outlined"
      }
    }
  },
  "CardBody": {
    "name": "CardBody",
    "description": "A Material CardBody component. Contains the main content of a Material Card component",
    "props": {
      "onClick": "event"
    }
  },
  "CardImage": {
    "name": "CardImage",
    "description": "An image component for the Material Card component",
    "props": {
      "displayHorizontal": "bool",
      "url": "string",
      "title": "string",
      "subtitle": "string"
    }
  },
  "CardHeader": {
    "name": "CardHeader",
    "description": "Displays a icon, title and subtitle above main body of the Material Card component",
    "props": {
      "title": "string",
      "subtitle": "string",
      "icon": "string"
    }
  },
  "CardFooter": {
    "name": "CardFooter",
    "description": "Displays buttons / icon buttons as actions for the Material Card component",
    "props": {
      "padding": "string"
    }
  },
  "Checkbox": {
    "name": "Checkbox",
    "description": "A Material Design checkbox. Supports aligning label before or after checkbox.",
    "props": {
      "onClick": "event",
      "id": "string",
      "label": "string",
      "disabled": "bool",
      "alignEnd": "bool",
      "indeterminate": "bool",
      "checked": "bool"
    },
    "tags": []
  },
  "Checkboxgroup": {
    "name": "Checkboxgroup",
    "description": "A group of material design checkboxes. Supports row and column orientation.",
    "props": {
      "onChange": "event",
      "label":"string",
      "orientation": {
        "type": "options",
        "options": ["row", "column"],
        "default": "row"
      },      
      "disabled": "bool",
      "alignEnd": "bool"
    }
  },
  "Datatable": {
    "name": "Datatable",
    "description": "A Material Design component to represent tabular data.",
    "props": {
      "onLoad":"event"
    },
    "tags": []
  },
  "DatatableHead": {
    "name": "DatatableHead",
    "description": "Material Design <thead>.",
    "props": {}
  },
  "DatatableCell": {
    "name": "DatatableCell",
    "description": "Material Design <td>.",
    "props": {}
  },
  "DatatableBody": {
    "name": "DatatableBody",
    "description": "Material Design <tbody>.",
    "props": {}
  },
  "DatatableRow": {
    "name": "DatatableRow",
    "description": "Material Design <tr>.",
    "props": {}
  },
  "DatePicker": {
    "name": "DatePicker",
    "description": "Material Design DatePicker",
    "props": {
      "date": "string",
      "label": "string",
      "onSelect": "event"
    },
    "tags": []
  },
  "H1": {
    "name": "H1",
    "description": "Sets the font properties as Roboto Headline1",
    "props": {
      "text": "string"
    },
    "tags": []
  },
  "H2": {
    "name": "H2",
    "description": "Sets the font properties as Roboto Headline2",
    "props": {
      "text": "string"
    },
    "tags": []
  },
  "H3": {
    "name": "H3",
    "description": "Sets the font properties as Roboto Headline3",
    "props": {
      "text": "string"
    },
    "tags": []
  },
  "H4": {
    "name": "H4",
    "description": "Sets the font properties as Roboto Headline4",
    "props": {
      "text": "string"
    },
    "tags": []
  },
  "H5": {
    "name": "H5",
    "description": "Sets the font properties as Roboto Headline5",
    "props": {
      "text": "string"
    },
    "tags": []
  },
  "H6": {
    "name": "H6",
    "description": "Sets the font properties as Roboto Headline6",
    "props": {
      "text": "string"
    },
    "tags": []
  },
  "IconButton": {
    "name": "IconButton",
    "description": "An icon button component",
    "props": {
      "onClick": "event",
      "disabled": "bool",
      "href": "string",
      "icon": "string",
      "size": {
        "type":"options",
        "options": ["small", "medium", "large"],
        "default": "medium"
      }
    },
    "tags": []
  },
  "Label": {
    "name": "Label",
    "description": "A simple label component that displays its text in the standard Roboto Material Design font",
    "props": {
      "text": "string",
      "bold": "bool"
    },
    "tags": []
  },
  "Menu": {
    "name": "Menu",
    "description": "A Material Design menu component. Anchor to other components to create a pop-out menu.",
    "props": {
      "onSelect": "event",
      "width": "string",
      "open": "bool",
      "useFixedPosition": "bool",
      "absolutePositionX": "number",
      "absolutePositionY": "number"
    }
  },
  "Overline": {
    "name": "Overline",
    "description": "Sets the font properties as Roboto Overline",
    "props": {
      "text": "string"
    },
    "tags": []
  },
  "Radiobutton": {
    "name": "Radiobutton",
    "description": "A Material Design radiobutton. Supports aligning label before or after radiobutton.",
    "props": {
      "onClick": "event",
      "id": "string",
      "label": "string",      
      "name": "string",      
      "disabled": "bool",
      "alignEnd": "bool"
    },
    "tags": []
  },
  "Radiobuttongroup": {
    "name": "Radiobuttongroup",
    "description": "A Material Design Radiobutton group. Supports row and column orientation.",
    "props": {
      "onChange": "event",
      "label": "string",
      "name": "string",
      "orientation": {
        "type": "options",
        "options": ["row", "column"],
        "default": "row"
      },
      "fullwidth": "bool",
      "alignEnd": "bool",
      "disabled": "bool"
    }
  },
  "Sub1": {
    "name": "Sub1",
    "description": "Sets the font properties as Roboto Subtitle1",
    "props": {
      "text": "string"
    },
    "tags": []
  },
  "Sub2": {
    "name": "Sub2",
    "description": "Sets the font properties as Roboto Subtitle2",
    "props": {
      "text": "string"
    },
    "tags": []
  },
  "Textfield": {
    "name": "Textfield",
    "description": "A Material Design textfield with multiple variants. Can also be converted to a text area / multine text field.",
    "props": {
      "onChange": "event",
      "value": "string",
      "label": "string",
      "variant": {
        "type": "options",
        "options": ["standard", "outlined", "filled"],
        "default": "standard"
      },
      "disabled": "bool",
      "fullwidth": "bool",
      "colour": {
        "type": "options",
        "options": ["primary", "secondary"],
        "default": "primary"
      },
      "size":{
        "type": "options",
        "options": ["small", "medium", "large"],
        "default": "medium"
      },
      "type": {
        "type": "options",
        "options": ["text", "password"],
        "default": "text"
      },
      "required": "bool",
      "minLength": "number",
      "maxLength": "number",
      "helperText": "string",
      "placeholder": "string",
      "icon": "string",
      "trailingIcon": "bool",
      "textarea": "bool",      
      "persistent": "bool"
    },
    "tags": []
  },
  "Switch": {
    "name": "Switch",
    "description": "A material design switch component",
    "props": {
      "alignEnd": "bool",
      "disabled": "bool",
      "checked": "bool",
      "label": "string",
      "id": "string"
    },
    "tags": []
  },
  "Slider": {
    "name": "Slider",
    "description": "A material design slider component",
    "props": {
      "variant": {
        "type": "options",
        "options": ["continuous", "discrete"],
        "default": "continuous"
      },
      "showTicks": "bool",
      "min": "number",
      "max": "number",
      "value": "number",
      "step": "number",
      "label": "string",
      "disabled": "bool"
    },
    "tags": []
  }
}