Moving external example code to the examples folder

_config.yml

@@ -77,6 +77,11 @@ pagination_dir: page
 # Disqus
 disqus_shortname:
 
+# Include/Exclude Files/Folders
+exclude:
+## Exclude example code from Nunjucks
+  - "v2/examples/vue-20-*/*"
+
 # Extensions
 ## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
 ## Themes: https://github.com/hexojs/hexo/wiki/Themes

assets/why-vue/arabic.js.srt

@@ -411,7 +411,7 @@ H2 إلى قائمة غير مرتبة،
 
 94
 00:03:57,460 --> 00:03:59,850
-دعنا نلغي ​​العنصر الأخير من المصفوفة
+دعنا نلغي العنصر الأخير من المصفوفة
 
 95
 00:03:59,850 --> 00:04:01,828

src/v2/examples/commits.md

@@ -6,4 +6,4 @@ order: 1
 
 > This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/c5g8xnar/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-github-commits?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/deepstream.md

@@ -6,4 +6,4 @@ order: 9
 
 > This example uses [deepstreamHub](https://deepstreamhub.com/) to synchronize realtime data, send events and make remote procedure calls between clients (you can try opening it in multiple browser windows).
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/ff0sp9hw/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-realtime-with-deepstreamhub?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/elastic-header.md

@@ -4,4 +4,4 @@ type: examples
 order: 7
 ---
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/y91wy85p/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-elastic-header?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/firebase.md

@@ -6,4 +6,4 @@ order: 10
 
 > This example uses [Firebase](https://firebase.google.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/pyLbpzzx/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-firebase-validation?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/grid-component.md

@@ -6,4 +6,4 @@ order: 3
 
 > This is an example of creating a reusable grid component and using it with external data.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/Tertia/vbyon64p/6/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-grid-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/index.md

@@ -6,4 +6,4 @@ order: 0
 
 > Dead simple Markdown editor.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/0dzvcf4d/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-markdown-editor?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/modal.md

@@ -6,4 +6,4 @@ order: 6
 
 > Features used: component, prop passing, content insertion, transitions.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mwLbw11k/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-modal-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/select2.md

@@ -6,4 +6,4 @@ order: 8
 
 > In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/d131Lebj/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-wrapper-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/svg.md

@@ -6,4 +6,4 @@ order: 5
 
 > This example showcases a combination of custom component, computed property, two-way binding and SVG support.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mhrckqgq/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-svg-graph?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/todomvc.md

@@ -6,6 +6,6 @@ order: 11
 
 > This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines).
 
-<p class="tip">Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the `localStorage` data will fail to be saved from JSFiddle. You'll have to click on `Edit in JSFiddle` to see the live result.</p>
+<p class="tip">Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the `localStorage` data will fail to be saved. You'll have to click on `Open Sandbox` to see the live result.</p>
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/4dr2fLb7/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-todomvc?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/tree-view.md

@@ -6,4 +6,4 @@ order: 4
 
 > Example of a simple tree view implementation showcasing recursive usage of components.
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/pnqzspoe/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-tree-view?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/vue-10-two-way-currency-filter-v2/index.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Two-way Currency Filter</title>
+    <script src="https://unpkg.com/vue@1.0/dist/vue.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <currency-input label="Price" v-bind:value.sync="price"></currency-input>
+      <currency-input
+        label="Shipping"
+        v-bind:value.sync="shipping"
+      ></currency-input>
+      <currency-input
+        label="Handling"
+        v-bind:value.sync="handling"
+      ></currency-input>
+      <currency-input
+        label="Discount"
+        v-bind:value.sync="discount"
+      ></currency-input>
+
+      <p>Total: ${{ total }}</p>
+    </div>
+
+    <script>
+      Vue.component("currency-input", {
+        template:
+          '\
+            <div>\
+              <label v-if="label">{{ label }}</label>\
+              <input\
+                v-model="value | currency"\
+                v-on:focus="selectAll"\
+              >\
+            </div>\
+          ',
+        props: {
+          value: {
+            type: Number,
+            default: 0,
+            twoWay: true
+          },
+          label: {
+            type: String,
+            default: ""
+          }
+        },
+        filters: {
+          currency: {
+            read: function(value) {
+              return "$" + value.toFixed(2);
+            },
+            write: function(value) {
+              var number = +value.replace(/[^\d.]/g, "");
+              return isNaN(number) ? 0 : number;
+            }
+          }
+        },
+        methods: {
+          selectAll: function(event) {
+            // Workaround for Safari bug
+            // http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
+            setTimeout(function() {
+              event.target.select();
+            }, 0);
+          }
+        }
+      });
+
+      new Vue({
+        el: "#app",
+        data: {
+          price: 0,
+          shipping: 0,
+          handling: 0,
+          discount: 0
+        },
+        computed: {
+          total: function() {
+            return this.price + this.shipping + this.handling - this.discount;
+          }
+        }
+      });
+    </script>
+  </body>
+</html>

src/v2/examples/vue-10-two-way-currency-filter-v2/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "vue-10-two-way-currency-filter-v2",
+  "version": "1.0.0",
+  "description": "Showing how delayed state updates can cause strange behavior.",
+  "main": "index.html",
+  "scripts": {
+    "start": "serve"
+  },
+  "keywords": [],
+  "license": "MIT",
+  "devDependencies": {
+    "serve": "^11.2.0"
+  }
+}

src/v2/examples/vue-10-two-way-currency-filter-v2/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "static"
+}

src/v2/examples/vue-10-two-way-currency-filter-v3/currency-validator.js

@@ -0,0 +1,61 @@
+var currencyValidator = {
+  format: function(number) {
+    return (Math.trunc(number * 100) / 100).toFixed(2);
+  },
+  parse: function(newString, oldNumber) {
+    var CleanParse = function(value) {
+      return { value: value };
+    };
+    var CurrencyWarning = function(warning, value) {
+      return {
+        warning: warning,
+        value: value,
+        attempt: newString
+      };
+    };
+    var NotAValidDollarAmountWarning = function(value) {
+      return new CurrencyWarning(
+        newString + " is not a valid dollar amount",
+        value
+      );
+    };
+    var AutomaticConversionWarning = function(value) {
+      return new CurrencyWarning(
+        newString + " was automatically converted to " + value,
+        value
+      );
+    };
+
+    var newNumber = Number(newString);
+    var indexOfDot = newString.indexOf(".");
+    var indexOfE = newString.indexOf("e");
+
+    if (isNaN(newNumber)) {
+      if (
+        indexOfDot === -1 &&
+        indexOfE > 0 &&
+        indexOfE === newString.length - 1 &&
+        Number(newString.slice(0, indexOfE)) !== 0
+      ) {
+        return new CleanParse(oldNumber);
+      } else {
+        return new NotAValidDollarAmountWarning(oldNumber);
+      }
+    }
+
+    var newCurrencyString = currencyValidator.format(newNumber);
+    var newCurrencyNumber = Number(newCurrencyString);
+
+    if (newCurrencyNumber === newNumber) {
+      if (indexOfE !== -1 && indexOfE === newString.length - 2) {
+        return new AutomaticConversionWarning(newNumber);
+      } else {
+        return new CleanParse(newNumber);
+      }
+    } else {
+      return new NotAValidDollarAmountWarning(
+        newNumber > newCurrencyNumber ? newCurrencyNumber : oldNumber
+      );
+    }
+  }
+};

src/v2/examples/vue-10-two-way-currency-filter-v3/index.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Two-way Currency Filter</title>
+    <script src="https://unpkg.com/vue@1.0/dist/vue.js"></script>
+    <script src="currency-validator.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <currency-input label="Price" v-bind:value.sync="price"></currency-input>
+      <currency-input
+        label="Shipping"
+        v-bind:value.sync="shipping"
+      ></currency-input>
+      <currency-input
+        label="Handling"
+        v-bind:value.sync="handling"
+      ></currency-input>
+      <currency-input
+        label="Discount"
+        v-bind:value.sync="discount"
+      ></currency-input>
+
+      <p>Total: ${{ total }}</p>
+    </div>
+
+    <script>
+      Vue.component("currency-input", {
+        template:
+          '\
+          <div>\
+            <label v-if="label">{{ label }}</label>\
+            $\
+            <input\
+              v-el:input\
+              v-model="value | currency"\
+              v-on:focus="selectAll"\
+            >\
+          </div>\
+        ',
+        props: {
+          value: {
+            type: Number,
+            default: 0,
+            twoWay: true
+          },
+          label: {
+            type: String,
+            default: ""
+          }
+        },
+        filters: {
+          currency: {
+            read: currencyValidator.format,
+            write: function(newValue, oldValue) {
+              var result = currencyValidator.parse(newValue, Number(oldValue));
+              if (result.warning) {
+                this.$els.input.value = result.value;
+              }
+              return result.value;
+            }
+          }
+        },
+        methods: {
+          selectAll: function(event) {
+            // Workaround for Safari bug
+            // http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
+            setTimeout(function() {
+              event.target.select();
+            }, 0);
+          }
+        }
+      });
+
+      new Vue({
+        el: "#app",
+        data: {
+          price: 0,
+          shipping: 0,
+          handling: 0,
+          discount: 0
+        },
+        computed: {
+          total: function() {
+            return (
+              (this.price * 100 +
+                this.shipping * 100 +
+                this.handling * 100 -
+                this.discount * 100) /
+              100
+            ).toFixed(2);
+          }
+        }
+      });
+    </script>
+  </body>
+</html>

src/v2/examples/vue-10-two-way-currency-filter-v3/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "vue-10-two-way-currency-filter-v3",
+  "version": "1.0.0",
+  "description": "Showing how delayed state updates can cause strange behavior.",
+  "main": "index.html",
+  "scripts": {
+    "start": "serve"
+  },
+  "keywords": [],
+  "license": "MIT",
+  "devDependencies": {
+    "serve": "^11.2.0"
+  }
+}

src/v2/examples/vue-10-two-way-currency-filter-v3/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "static"
+}