forked from vuejs/v2.vuejs.org
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Moving external example code to the examples folder (vuejs#2457)
* Moving example code to examples folder Example code from https://jsfiddle.net/phanan/5h0wx9np * Example app to pull code from example folder Once merged the URL https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-template-compilation?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-template-compilation?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview * Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/6744xnjk * Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/943zfbsh * Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/9c32kev2 * Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/1oqjojjx * Example app to pull code from example folder Once merged the following URLs will work: https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-two-way-currency-filter?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-10-two-way-currency-filter-v3?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-10-two-way-currency-filter-v2?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-10-two-way-currency-filter?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview For testing, use: https://codesandbox.io/embed/github/gareth/vuejs.org/tree/master/src/v2/examples/vue-20-two-way-currency-filter?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-10-two-way-currency-filter-v3?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-10-two-way-currency-filter-v2?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-10-two-way-currency-filter?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light&view=preview * Update migration.md * Update migration.md * Moving example code to examples folder Code from https://jsfiddle.net/yyx990803/mhrckqgq * Example app to pull code from example folder Once deployed the link 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 will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-svg-graph?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light * Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/pnqzspoe * Example app to pull code from example folder Once deployed, the url 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 will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-tree-view?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light * Moving example code to examples folder Code from https://jsfiddle.net/yyx990803/c5g8xnar * Example app to pull code from example folder Once deployed the URL 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 will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-github-commits?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light * Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/d131Lebj * Example app to pull code from example folder Once deployed the url 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 will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-wrapper-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light * Moving example code to examples folder Code from https://jsfiddle.net/yyx990803/mwLbw11k * Example app to pull code from example folder Once deployed the URL 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 will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-modal-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light * Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/0dzvcf4d * Example app to pull code from example folder Once deployed the url 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 will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-markdown-editor?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light * Moving example code to examples folder Code from https://jsfiddle.net/yyx990803/y91wy85p * Example app to pull code from example folder Once deployed the url 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 will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-elastic-header?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light * Moving example code to examples folder Code from https://jsfiddle.net/yyx990803/ff0sp9hw * Example app to pull code from example folder Once deployed the url 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 will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-realtime-with-deepstreamhub?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light * Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/pyLbpzzx * Example app to pull code from example folder Once deployed the url 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 will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-firebase-validation?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light * Moving example code to examples folder Code from https://jsfiddle.net/yyx990803/4dr2fLb7 * Example app to pull code from example folder Once deployed the url https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-todomvc?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-todomvc?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light * Moving example code to examples folder Code from https://jsfiddle.net/Tertia/vbyon64p/6 * Example app to pull code from example folder Once deployed the url 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 will work. For testing, use https://codesandbox.io/embed/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-grid-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light * Fixing typo * Removing unnecessary raw tags * Removing zero width characters * Adding exclude for examples source code Nunjucks throws errors due to use of `{{` and `}}` in the source code of examples, but it isn't rendered so not necessary for it to be checked and can't use 'raw' workaround since it's actual code that gets used.
- Loading branch information
Showing
76 changed files
with
2,617 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
88 changes: 88 additions & 0 deletions
88
src/v2/examples/vue-10-two-way-currency-filter-v2/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Two-way Currency Filter</title> | ||
| <script src="https://unpkg.com/[email protected]/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> |
14 changes: 14 additions & 0 deletions
14
src/v2/examples/vue-10-two-way-currency-filter-v2/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| } |
3 changes: 3 additions & 0 deletions
3
src/v2/examples/vue-10-two-way-currency-filter-v2/sandbox.config.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "template": "static" | ||
| } |
61 changes: 61 additions & 0 deletions
61
src/v2/examples/vue-10-two-way-currency-filter-v3/currency-validator.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| ); | ||
| } | ||
| } | ||
| }; |
97 changes: 97 additions & 0 deletions
97
src/v2/examples/vue-10-two-way-currency-filter-v3/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Two-way Currency Filter</title> | ||
| <script src="https://unpkg.com/[email protected]/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> |
14 changes: 14 additions & 0 deletions
14
src/v2/examples/vue-10-two-way-currency-filter-v3/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| } |
3 changes: 3 additions & 0 deletions
3
src/v2/examples/vue-10-two-way-currency-filter-v3/sandbox.config.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "template": "static" | ||
| } |
Oops, something went wrong.