{
  "name": "myVueProject",
  "globals": {
    "settings": {
      "language": "en",
      "title": "UIDL v0.6 Project"
    },
    "assets": [
      {
        "type": "style",
        "attrs": {
          "data-type": "default-styles"
        },
        "content": "body{font-family: 'Roboto', sans-serif; color: #2c3e50; -webkit-font-smoothing: antialiased; font-size: 16px;} a{color:inherit; text-decoration: none}"
      }
    ],
    "meta": []
  },
  "root": {
    "name": "App",
    "stateDefinitions": {
      "route": {
        "type": "string",
        "defaultValue": "index",
        "values": [
          {
            "value": "index",
            "pageOptions": {
              "navLink": "/",
              "componentName": "Home"
            }
          },
          {
            "value": "about",
            "pageOptions": {
              "navLink": "/about",
              "componentName": "About"
            }
          },
          {
            "value": "contact-us",
            "pageOptions": {
              "navLink": "/here-we-are",
              "componentName": "Us"
            }
          }
        ]
      }
    },
    "node": {
      "type": "element",
      "content": {
        "elementType": "Router",
        "children": [
          {
            "type": "conditional",
            "content": {
              "node": {
                "type": "element",
                "content": {
                  "elementType": "container",
                  "style": {
                    "border": "1px solid green",
                    "padding": {
                      "type": "static",
                      "content": "10px"
                    }
                  },
                  "children": [
                    {
                      "type": "element",
                      "content": {
                        "elementType": "component",
                        "semanticType": "Navbar",
                        "dependency": {
                          "type": "local"
                        }
                      }
                    },
                    {
                      "type": "static",
                      "content": "Page 1"
                    }
                  ]
                }
              },
              "value": "index",
              "reference": {
                "type": "dynamic",
                "content": {
                  "referenceType": "state",
                  "id": "route"
                }
              }
            }
          },
          {
            "type": "conditional",
            "content": {
              "node": {
                "type": "element",
                "content": {
                  "elementType": "container",
                  "style": {
                    "border": {
                      "type": "static",
                      "content": "1px solid black"
                    },
                    "padding": {
                      "type": "static",
                      "content": "1px solid black"
                    }
                  },
                  "children": [
                    {
                      "type": "element",
                      "content": {
                        "elementType": "component",
                        "semanticType": "Navbar",
                        "dependency": {
                          "type": "local"
                        }
                      }
                    },
                    {
                      "type": "static",
                      "content": "Page 2"
                    }
                  ]
                }
              },
              "value": "about",
              "reference": {
                "type": "dynamic",
                "content": {
                  "referenceType": "state",
                  "id": "route"
                }
              }
            }
          },
          {
            "type": "conditional",
            "content": {
              "node": {
                "type": "element",
                "content": {
                  "elementType": "container",
                  "style": {
                    "border": {
                      "type": "static",
                      "content": "1px solid black"
                    },
                    "padding": {
                      "type": "static",
                      "content": "1px solid black"
                    }
                  },
                  "children": [
                    {
                      "type": "element",
                      "content": {
                        "elementType": "component",
                        "semanticType": "Navbar",
                        "dependency": {
                          "type": "local"
                        }
                      }
                    },
                    {
                      "type": "static",
                      "content": "Page 3"
                    },
                    {
                      "type": "element",
                      "content": {
                        "elementType": "component",
                        "semanticType": "OneComponent",
                        "dependency": {
                          "type": "local"
                        }
                      }
                    }
                  ]
                }
              },
              "value": "contact-us",
              "reference": {
                "type": "dynamic",
                "content": {
                  "referenceType": "state",
                  "id": "route"
                }
              }
            }
          }
        ]
      }
    }
  },
  "components": {
    "Navbar": {
      "name": "Navbar",
      "node": {
        "type": "element",
        "content": {
          "elementType": "group",
          "children": [
            {
              "type": "element",
              "content": {
                "elementType": "navlink",
                "attrs": {
                  "transitionTo": "/"
                },
                "children": [
                  {
                    "type": "static",
                    "content": "Home"
                  }
                ]
              }
            },
            {
              "type": "element",
              "content": {
                "elementType": "navlink",
                "attrs": {
                  "transitionTo": "/about"
                },
                "children": [
                  {
                    "type": "static",
                    "content": "About"
                  }
                ]
              }
            },
            {
              "type": "element",
              "content": {
                "elementType": "navlink",
                "attrs": {
                  "transitionTo": "/here-we-are"
                },
                "children": [
                  {
                    "type": "static",
                    "content": "Contact"
                  }
                ]
              }
            }
          ]
        }
      }
    },
    "OneComponent": {
      "name": "OneComponent",
      "propDefinitions": {
        "title": {
          "type": "string",
          "defaultValue": "Hello"
        },
        "items": {
          "type": "array",
          "defaultValue": []
        },
        "hero": {
          "type": "object",
          "defaultValue": {
            "bg Image": {
              "src": "test"
            }
          }
        }
      },
      "stateDefinitions": {
        "isVisible": {
          "type": "boolean",
          "defaultValue": true
        }
      },
      "node": {
        "type": "element",
        "content": {
          "elementType": "container",
          "attrs": {
            "data-static-attr": {
              "type": "static",
              "content": "test"
            },
            "data-dynamic-attr": {
              "type": "dynamic",
              "content": {
                "referenceType": "prop",
                "id": "title"
              }
            },
            "bgImage": {
              "type": "dynamic",
              "content": {
                "referenceType": "prop",
                "id": "hero['bg Image'].src"
              }
            }
          },
          "children": [
            {
              "type": "element",
              "content": {
                "elementType": "text",
                "children": [
                  {
                    "type": "static",
                    "content": "Hello World!"
                  },
                  {
                    "type": "dynamic",
                    "content": {
                      "referenceType": "prop",
                      "id": "title"
                    }
                  }
                ]
              }
            },
            {
              "type": "repeat",
              "content": {
                "node": {
                  "type": "element",
                  "content": {
                    "elementType": "text",
                    "children": [
                      {
                        "type": "dynamic",
                        "content": {
                          "referenceType": "local",
                          "id": "item"
                        }
                      },
                      {
                        "type": "element",
                        "content": {
                          "elementType": "list",
                          "attrs": {
                            "items": {
                              "type": "static",
                              "content": [
                                "angular",
                                "react",
                                "vue"
                              ]
                            }
                          }
                        }
                      }
                    ]
                  }
                },
                "dataSource": {
                  "type": "dynamic",
                  "content": {
                    "referenceType": "prop",
                    "id": "items"
                  }
                },
                "meta": {
                  "useIndex": true,
                  "iteratorName": "item"
                }
              }
            },
            {
              "type": "conditional",
              "content": {
                "reference": {
                  "type": "dynamic",
                  "content": {
                    "referenceType": "prop",
                    "id": "title"
                  }
                },
                "value": "matching",
                "node": {
                  "type": "element",
                  "content": {
                    "elementType": "text",
                    "children": [
                      {
                        "type": "static",
                        "content": "Now you see me!"
                      }
                    ]
                  }
                }
              }
            },
            {
              "type": "element",
              "content": {
                "elementType": "video",
                "attrs": {
                  "autoPlay": {
                    "type": "static",
                    "content": true
                  }
                },
                "children": [
                  {
                    "type": "element",
                    "content": {
                      "elementType": "source",
                      "attrs": {
                        "type": {
                          "type": "static",
                          "content": "video/mp4"
                        },
                        "url": {
                          "type": "static",
                          "content": "https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"
                        }
                      }
                    }
                  }
                ]
              }
            },
            {
              "type": "slot",
              "content": {}
            },
            {
              "type": "element",
              "content": {
                "elementType": "navlink",
                "attrs": {
                  "transitionTo": {
                    "type": "static",
                    "content": "about"
                  }
                },
                "children": [
                  {
                    "type": "static",
                    "content": "About Page"
                  }
                ]
              }
            }
          ]
        }
      }
    },
    "ExpandableArea": {
      "name": "ExpandableArea",
      "propDefinitions": {
        "title": {
          "type": "string",
          "defaultValue": "Hello"
        },
        "text": {
          "type": "string",
          "defaultValue": "Is it me you're looking for?"
        }
      },
      "stateDefinitions": {
        "isExpanded": {
          "type": "boolean",
          "defaultValue": false
        }
      },
      "node": {
        "type": "element",
        "content": {
          "elementType": "container",
          "style": {
            "border": {
              "type": "static",
              "content": "1px solid green"
            },
            "margin": {
              "type": "static",
              "content": "10px"
            }
          },
          "children": [
            {
              "type": "element",
              "content": {
                "elementType": "text",
                "children": [
                  {
                    "type": "dynamic",
                    "content": {
                      "referenceType": "prop",
                      "id": "title"
                    }
                  }
                ]
              }
            },
            {
              "type": "element",
              "content": {
                "elementType": "button",
                "children": [
                  {
                    "type": "conditional",
                    "content": {
                      "node": {
                        "type": "static",
                        "content": "Hide me"
                      },
                      "value": true,
                      "reference": {
                        "type": "dynamic",
                        "content": {
                          "referenceType": "state",
                          "id": "isExpanded"
                        }
                      }
                    }
                  },
                  {
                    "type": "conditional",
                    "content": {
                      "node": {
                        "type": "static",
                        "content": "Show me"
                      },
                      "value": false,
                      "reference": {
                        "type": "dynamic",
                        "content": {
                          "referenceType": "state",
                          "id": "isExpanded"
                        }
                      }
                    }
                  }
                ],
                "events": {
                  "click": [
                    {
                      "type": "stateChange",
                      "modifies": "isExpanded",
                      "newState": "$toggle"
                    }
                  ]
                }
              }
            },
            {
              "type": "conditional",
              "content": {
                "node": {
                  "type": "element",
                  "content": {
                    "elementType": "text",
                    "children": [
                      {
                        "type": "dynamic",
                        "content": {
                          "referenceType": "prop",
                          "id": "text"
                        }
                      }
                    ]
                  }
                },
                "value": true,
                "reference": {
                  "type": "dynamic",
                  "content": {
                    "referenceType": "state",
                    "id": "isExpanded"
                  }
                }
              }
            }
          ]
        }
      }
    },
    "Modal": {
      "name": "Modal",
      "stateDefinitions": {
        "isOpen": {
          "type": "boolean",
          "defaultValue": false
        }
      },
      "node": {
        "type": "element",
        "content": {
          "elementType": "group",
          "children": [
            {
              "type": "element",
              "content": {
                "elementType": "button",
                "name": "openmodal",
                "children": [
                  {
                    "type": "static",
                    "content": "Show Popup"
                  }
                ],
                "events": {
                  "click": [
                    {
                      "type": "stateChange",
                      "modifies": "isOpen",
                      "newState": true
                    }
                  ]
                }
              }
            },
            {
              "type": "conditional",
              "content": {
                "node": {
                  "type": "element",
                  "content": {
                    "elementType": "component",
                    "semanticType": "ModalWindow",
                    "name": "window",
                    "dependency": {
                      "type": "local"
                    },
                    "events": {
                      "onClose": [
                        {
                          "type": "stateChange",
                          "modifies": "isOpen",
                          "newState": false
                        }
                      ]
                    }
                  }
                },
                "value": true,
                "reference": {
                  "type": "dynamic",
                  "content": {
                    "referenceType": "state",
                    "id": "isOpen"
                  }
                }
              }
            }
          ]
        }
      }
    },
    "ModalWindow": {
      "name": "ModalWindow",
      "propDefinitions": {
        "message": {
          "type": "string",
          "defaultValue": "Hello"
        },
        "onClose": {
          "type": "func",
          "defaultValue": "() => {}"
        }
      },
      "stateDefinitions": {
        "fakeState": {
          "type": "boolean",
          "defaultValue": false
        }
      },
      "node": {
        "type": "element",
        "content": {
          "elementType": "container",
          "children": [
            {
              "type": "dynamic",
              "content": {
                "referenceType": "prop",
                "id": "message"
              }
            },
            {
              "type": "element",
              "content": {
                "elementType": "button",
                "name": "close",
                "children": [
                  {
                    "type": "static",
                    "content": "Close me"
                  }
                ],
                "events": {
                  "click": [
                    {
                      "type": "propCall",
                      "calls": "onClose"
                    },
                    {
                      "type": "stateChange",
                      "modifies": "fakeState",
                      "newState": false
                    }
                  ]
                }
              }
            }
          ]
        }
      }
    }
  }
}