initial release

l0rn · Dec 9, 2017 · 4d9319e · 4d9319e
1 parent 6031bfb
commit 4d9319e
Show file tree

Hide file tree

Showing 23 changed files with 7,299 additions and 53 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,59 +1,11 @@
-# Logs
-logs
-*.log
+# node / npm stuff
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Typescript v1 declaration files
-typings/
-
-# Optional npm cache directory
 .npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
 .node_repl_history
 
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
+# dependency directories
+node_modules/
 
-# dotenv environment variables file
-.env
+# IDEs
+.idea
 
diff --git a/README.md b/README.md
@@ -0,0 +1,60 @@
+# Vue2 tile panels
+
+## What does it do?
+
+With this little library you can easily create resizable tiled panels in your web application. It should be useful to resemble the behaviour of many desktop applications where you can attach and resize panels containing toolbars, file explorers or something like that.
+
+## How do I use it?
+
+For now I just going to add a very basic example:
+
+```html
+    <!doctype html>
+    <html>
+    <head>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" type="text/javascript"></script>
+        <script src="vue2-tile-panels.js" type="text/javascript"></script>
+        <link href="vue2-tile-panels.css" rel="stylesheet" type="text/css">
+        <!--- styles truncated --->
+    </head>
+    <body>
+        <div id="app">
+            <tile-frame>
+                <vertical-split>
+                    <horizontal-split slot="left">
+                        <div class="box red-box" slot="top"></div>
+                        <div class="box blue-box" slot="bottom">
+                            <vertical-split>
+
+                            </vertical-split>
+                        </div>
+                    </horizontal-split>
+                    <div class="box green-box" slot="right"></div>
+                </vertical-split>
+            </tile-frame>
+        </div>
+        <script>
+            Vue.use(VueTilePanels)
+            new Vue({
+              el: '#app',
+            })
+        </script>
+    </body>
+    </html>
+```
+
+## How do I run the example
+
+Clone the repository and run
+
+```bash
+$ npm i
+$ npx webpack-dev-server
+```
+
+## I want to contribute, how do i build?
+
+```bash
+$ npm i
+$ npm run build
+```
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+<head>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" type="text/javascript"></script>
+    <style>
+        body,html {
+            margin: 0;
+            padding: 0;
+            height: 100%
+        }
+        #app {
+            height: 100%;
+            width: 100%;
+        }
+        .box {
+            height: 100%;
+            width: 100%;
+            display: flex;
+        }
+        .green-box {
+            background: green;
+        }
+        .red-box {
+            background: darkred;
+        }
+        .blue-box {
+            background: darkblue;
+        }
+    </style>
+<link href="vue2-tile-panels.css" rel="stylesheet"><script type="text/javascript" src="vue2-tile-panels.js"></script></head>
+<body>
+    <div id="app">
+        <tile-frame>
+            <vertical-split>
+                <horizontal-split slot="left">
+                    <div class="box red-box" slot="top"></div>
+                    <div class="box blue-box" slot="bottom">
+                        <vertical-split>
+
+                        </vertical-split>
+                    </div>
+                </horizontal-split>
+                <div class="box green-box" slot="right"></div>
+            </vertical-split>
+        </tile-frame>
+    </div>
+    <script>
+        Vue.use(VueTilePanels)
+        new Vue({
+          el: '#app',
+        })
+    </script>
+</body>
+</html>
diff --git a/dist/vue2-tile-panels.css b/dist/vue2-tile-panels.css
diff --git a/dist/vue2-tile-panels.css.map b/dist/vue2-tile-panels.css.map