Added example files

javisperez · Aug 24, 2016 · 561a5a4 · 561a5a4
1 parent 372650c
commit 561a5a4
Show file tree

Hide file tree

Showing 4 changed files with 205 additions and 0 deletions.
diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,7 @@
+To run this example please run
+
+```
+npm install
+```
+
+To install VueJS which is a dependency. Thank you :)
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Vue Translate Test Page</title>
+        <script src="node_modules/vue/dist/vue.js"></script>
+        <script src="node_modules/vue-translate-plugin/dist/vue-translate.min.js"></script>
+        <style>
+            body {
+                margin: 0;
+                padding: 0;
+                background: #EDEDED;
+                font: 14px Helvetica, Arial, sans-serif;
+            }
+
+            header {
+                background: #ffc200;
+                padding: 10px;
+                display: flex;
+                justify-content: space-between;
+                color: #333;
+            }
+
+            header div span {
+                cursor: pointer;
+                color: #5151cc;
+            }
+
+            header div span:hover {
+                text-decoration: underline;
+            }
+
+            header div span.current {
+                font-weight: bold;
+            }
+
+            .sample-content {
+                background: white;
+                padding: 20px;
+                margin: 20px auto 0;
+                width: 80%;
+                box-shadow: 0 4px 10px #999;
+            }
+
+            .form label {
+                display: block;
+                margin-bottom: 10px;
+            }
+            .form.input input {
+                padding: 10px;
+                font-size: 14px;
+                width: 300px;
+                margin-top: 20px;
+                margin-bottom: 20px;
+                display: block;
+            }
+
+            .form.result {
+                background: #8BC34A;
+                padding: 20px;
+                color: #FFF;
+                font-size: 18px;
+                font-weight: lighter;
+                margin-bottom: 40px;
+            }
+
+            h2 {
+                margin-top: 40px;
+            }
+
+            .no-translation {
+                font-weight: bold;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="app"></div>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "susana",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "vue": "^2.0.0-rc.3",
+    "vue-translate-plugin": "^1.0.0"
+  }
+}
diff --git a/example/script.js b/example/script.js
@@ -0,0 +1,103 @@
+Vue.use(VueTranslate);
+
+Vue.component('sample-header', {
+    name: 'sample-header',
+
+    locales: {
+        es_DO: {
+            'Welcome to Vue Translate!': 'Bienvenido a Vue Translate!',
+            'Try changing the language to': 'Prueba cambiando el idioma a',
+            'English': 'Inglés',
+            'Spanish': 'Español'
+        }
+    },
+
+    methods: {
+        setLang(lang) {
+            this.$translate.setLang(lang);
+        }
+    },
+
+    template: `<header>
+            <div v-translate>
+                <slot></slot>
+            </div>
+            <div>
+                {{ t('Try changing the language to') }}:
+                <span @click="setLang('en_US')" v-translate :class="{'current': $translate.current === 'en_US'}">English</span>
+                <span @click="setLang('es_DO')" v-translate :class="{'current': $translate.current === 'es_DO'}">Spanish</span>
+            </div>
+        </header>`
+});
+
+Vue.component('sample-content', {
+    name: 'sample-content',
+
+    locales: {
+        es_DO: {
+            'Hello there!': 'Hola!',
+            'While this, is.': 'Mientras que este, si.',
+            'Reactivity': 'Reactividad',
+            'And it\'s completely reactive, let\'s try with dynamic content!': 'Y es completamente reactivo, probemos con contenido dinámico!',
+            'Or even computed properties.': 'O incluso con propiedades computadas.',
+            '(Remember to change the language to spanish to see the translations)': '(Reacuerda cambiar el idioma a inglés para que veas la traducción)',
+            'hello world': 'hola mundo',
+            'Hello world': 'Hola mundo',
+            'Hello World': 'Hola Mundo',
+            'HELLO WORLD': 'HOLA MUNDO',
+        }
+    },
+
+    data() {
+        return {
+            sampleInput: '',
+            computedInput: ''
+        };
+    },
+
+    computed: {
+        translatedInput() {
+            return this.t(this.computedInput);
+        }
+    },
+
+    template: `<section class="sample-content">
+                <h1 v-translate>Hello there!</h1>
+                <p class="no-translation">This text is not being translated.</p>
+                <p v-translate>While this, is.</p>
+
+                <h2 v-translate>Reactivity</h2>
+
+                <div class="form input">
+                    <label v-translate>And it's completely reactive, let's try with dynamic inputs!</label>
+                    <small v-translate>(Remember to change the language to spanish to see the translations)</small>
+
+                    <input type="text" v-model="sampleInput" placeholder="Try typing 'hello world'" />
+                </div>
+
+                <div class="form result">{{ t(sampleInput) }}</div>
+
+                <div class="form input">
+                    <label>Or even computed properties.</label>
+                    <small>(Remember to change the language to spanish to see the translations)</small>
+
+                    <input type="text" v-model="computedInput" placeholder="Try typing 'hello world' again" />
+                </div>
+
+                <div class="form result">{{ translatedInput }}</div>
+        </section>`
+})
+
+new Vue({
+
+    created() {
+        this.$translate.setLang('en_US');
+    },
+
+    template: `<div>
+            <sample-header>Welcome to Vue Translate!</sample-header>
+
+            <sample-content></sample-content>
+        </div>`
+
+}).$mount('#app');