olton
diff --git a/‎__html__/model.html
+40 b/‎__html__/model.html
+40
diff --git a/‎icons-extractor/icons-extractor.php
-34 b/‎icons-extractor/icons-extractor.php
-34
diff --git a/‎lib/metro.all.js
+80-4 b/‎lib/metro.all.js
+80-4
diff --git a/‎lib/metro.all.js.map
+4-4 b/‎lib/metro.all.js.map
+4-4
diff --git a/‎lib/metro.js
+80-4 b/‎lib/metro.js
+80-4
diff --git a/‎lib/metro.js.map
+4-4 b/‎lib/metro.js.map
+4-4
diff --git a/‎source/components/directive/directive.js
+1-1 b/‎source/components/directive/directive.js
+1-1
diff --git a/‎source/core/metro.js
+3 b/‎source/core/metro.js
+3
diff --git a/‎source/default.js
-2 b/‎source/default.js
-2
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <link href="../lib/metro.css" rel="stylesheet">
+
+    <title>Test Any - Metro UI :: Popular HTML, CSS and JS library</title>
+
+</head>
+<body class="cloak">
+<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
+    <span class="app-bar-item">Model</span>
+    <div class="app-bar-item-static ml-auto">
+        <input type="checkbox" data-role="theme-switcher"/>
+    </div>
+</nav>
+
+<div class="h-100 d-flex flex-center flex-column">
+    <div class="h1">Counter</div>
+    <div class="m-10">{{ counter }}</div>
+    <button onclick="updateCounter()">Update Counter</button>
+</div>
+
+<script src="../lib/metro.js"></script>
+<script>
+    Metro.welcome()
+    var app = new Metro.Model({
+        counter: 0
+    })
+    
+    app.init()
+    
+    function updateCounter() {
+        app.data.counter++
+        console.log(app.data.counter)
+    }
+</script>
+</body>
+</html>
@@ -60,7 +60,7 @@
         directive: "note",
         showIcon: true,
         title: "default",
-        style: 1, // default - 1, vue - 2
+        style: 1, // default - 1, vue style - 2, 3 
         onDirectiveCreate: Metro.noop
     };
 
 
@@ -1,5 +1,6 @@
 /** @format */
 import { Props } from "./props.js";
+import Model from "../model/index.js"; 
 
 (() => {
     "use strict";
@@ -627,5 +628,7 @@ import { Props } from "./props.js";
         });
     }
 
+    Metro.Model = Model;
+    
     return Metro;
 })();
@@ -1,5 +1,3 @@
-/** @format */
-
 import "./reset/index.js";
 import "./runtime.js";
 import "./i18n/index.js";
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-/** @format */`
`2`		`-`
`3`	`1`	`import "./reset/index.js";`
`4`	`2`	`import "./runtime.js";`
`5`	`3`	`import "./i18n/index.js";`