Skip to content

Commit c38480b

Browse files
garethxgarethx
authored
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.
1 parent 3a0b318 commit c38480b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+2617
-22
lines changed

‎_config.yml

+5
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,11 @@ pagination_dir: page
7777
# Disqus
7878
disqus_shortname:
7979

80+
# Include/Exclude Files/Folders
81+
exclude:
82+
## Exclude example code from Nunjucks
83+
- "v2/examples/vue-20-*/*"
84+
8085
# Extensions
8186
## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
8287
## Themes: https://github.com/hexojs/hexo/wiki/Themes

‎assets/why-vue/arabic.js.srt

+1-1
Original file line numberDiff line numberDiff line change
@@ -411,7 +411,7 @@ H2 إلى قائمة غير مرتبة،
411411

412412
94
413413
00:03:57,460 --> 00:03:59,850
414-
دعنا نلغي ​​العنصر الأخير من المصفوفة
414+
دعنا نلغي العنصر الأخير من المصفوفة
415415

416416
95
417417
00:03:59,850 --> 00:04:01,828

‎src/v2/examples/commits.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 1
66

77
> 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.
88
9-
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/c5g8xnar/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
9+
<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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 9
66

77
> 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).
88
9-
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/ff0sp9hw/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
9+
<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

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ type: examples
44
order: 7
55
---
66

7-
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/y91wy85p/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
7+
<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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 10
66

77
> 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.
88
9-
<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/pyLbpzzx/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
9+
<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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 3
66

77
> This is an example of creating a reusable grid component and using it with external data.
88
9-
<iframe width="100%" height="500" src="https://jsfiddle.net/Tertia/vbyon64p/6/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
9+
<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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 0
66

77
> Dead simple Markdown editor.
88
9-
<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/0dzvcf4d/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
9+
<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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 6
66

77
> Features used: component, prop passing, content insertion, transitions.
88
9-
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mwLbw11k/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
9+
<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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 8
66

77
> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
88
9-
<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/d131Lebj/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
9+
<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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 5
66

77
> This example showcases a combination of custom component, computed property, two-way binding and SVG support.
88
9-
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mhrckqgq/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
9+
<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

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ order: 11
66

77
> This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines).
88
9-
<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>
9+
<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>
1010

11-
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/4dr2fLb7/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
11+
<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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 4
66

77
> Example of a simple tree view implementation showcasing recursive usage of components.
88
9-
<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/pnqzspoe/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
9+
<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

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Two-way Currency Filter</title>
5+
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
6+
<script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>
7+
</head>
8+
<body>
9+
<div id="app">
10+
<currency-input label="Price" v-bind:value.sync="price"></currency-input>
11+
<currency-input
12+
label="Shipping"
13+
v-bind:value.sync="shipping"
14+
></currency-input>
15+
<currency-input
16+
label="Handling"
17+
v-bind:value.sync="handling"
18+
></currency-input>
19+
<currency-input
20+
label="Discount"
21+
v-bind:value.sync="discount"
22+
></currency-input>
23+
24+
<p>Total: ${{ total }}</p>
25+
</div>
26+
27+
<script>
28+
Vue.component("currency-input", {
29+
template:
30+
'\
31+
<div>\
32+
<label v-if="label">{{ label }}</label>\
33+
<input\
34+
v-model="value | currency"\
35+
v-on:focus="selectAll"\
36+
>\
37+
</div>\
38+
',
39+
props: {
40+
value: {
41+
type: Number,
42+
default: 0,
43+
twoWay: true
44+
},
45+
label: {
46+
type: String,
47+
default: ""
48+
}
49+
},
50+
filters: {
51+
currency: {
52+
read: function(value) {
53+
return "$" + value.toFixed(2);
54+
},
55+
write: function(value) {
56+
var number = +value.replace(/[^\d.]/g, "");
57+
return isNaN(number) ? 0 : number;
58+
}
59+
}
60+
},
61+
methods: {
62+
selectAll: function(event) {
63+
// Workaround for Safari bug
64+
// http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
65+
setTimeout(function() {
66+
event.target.select();
67+
}, 0);
68+
}
69+
}
70+
});
71+
72+
new Vue({
73+
el: "#app",
74+
data: {
75+
price: 0,
76+
shipping: 0,
77+
handling: 0,
78+
discount: 0
79+
},
80+
computed: {
81+
total: function() {
82+
return this.price + this.shipping + this.handling - this.discount;
83+
}
84+
}
85+
});
86+
</script>
87+
</body>
88+
</html>

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "vue-10-two-way-currency-filter-v2",
3+
"version": "1.0.0",
4+
"description": "Showing how delayed state updates can cause strange behavior.",
5+
"main": "index.html",
6+
"scripts": {
7+
"start": "serve"
8+
},
9+
"keywords": [],
10+
"license": "MIT",
11+
"devDependencies": {
12+
"serve": "^11.2.0"
13+
}
14+
}

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"template": "static"
3+
}

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

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
var currencyValidator = {
2+
format: function(number) {
3+
return (Math.trunc(number * 100) / 100).toFixed(2);
4+
},
5+
parse: function(newString, oldNumber) {
6+
var CleanParse = function(value) {
7+
return { value: value };
8+
};
9+
var CurrencyWarning = function(warning, value) {
10+
return {
11+
warning: warning,
12+
value: value,
13+
attempt: newString
14+
};
15+
};
16+
var NotAValidDollarAmountWarning = function(value) {
17+
return new CurrencyWarning(
18+
newString + " is not a valid dollar amount",
19+
value
20+
);
21+
};
22+
var AutomaticConversionWarning = function(value) {
23+
return new CurrencyWarning(
24+
newString + " was automatically converted to " + value,
25+
value
26+
);
27+
};
28+
29+
var newNumber = Number(newString);
30+
var indexOfDot = newString.indexOf(".");
31+
var indexOfE = newString.indexOf("e");
32+
33+
if (isNaN(newNumber)) {
34+
if (
35+
indexOfDot === -1 &&
36+
indexOfE > 0 &&
37+
indexOfE === newString.length - 1 &&
38+
Number(newString.slice(0, indexOfE)) !== 0
39+
) {
40+
return new CleanParse(oldNumber);
41+
} else {
42+
return new NotAValidDollarAmountWarning(oldNumber);
43+
}
44+
}
45+
46+
var newCurrencyString = currencyValidator.format(newNumber);
47+
var newCurrencyNumber = Number(newCurrencyString);
48+
49+
if (newCurrencyNumber === newNumber) {
50+
if (indexOfE !== -1 && indexOfE === newString.length - 2) {
51+
return new AutomaticConversionWarning(newNumber);
52+
} else {
53+
return new CleanParse(newNumber);
54+
}
55+
} else {
56+
return new NotAValidDollarAmountWarning(
57+
newNumber > newCurrencyNumber ? newCurrencyNumber : oldNumber
58+
);
59+
}
60+
}
61+
};

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

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Two-way Currency Filter</title>
5+
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
6+
<script src="currency-validator.js"></script>
7+
</head>
8+
<body>
9+
<div id="app">
10+
<currency-input label="Price" v-bind:value.sync="price"></currency-input>
11+
<currency-input
12+
label="Shipping"
13+
v-bind:value.sync="shipping"
14+
></currency-input>
15+
<currency-input
16+
label="Handling"
17+
v-bind:value.sync="handling"
18+
></currency-input>
19+
<currency-input
20+
label="Discount"
21+
v-bind:value.sync="discount"
22+
></currency-input>
23+
24+
<p>Total: ${{ total }}</p>
25+
</div>
26+
27+
<script>
28+
Vue.component("currency-input", {
29+
template:
30+
'\
31+
<div>\
32+
<label v-if="label">{{ label }}</label>\
33+
$\
34+
<input\
35+
v-el:input\
36+
v-model="value | currency"\
37+
v-on:focus="selectAll"\
38+
>\
39+
</div>\
40+
',
41+
props: {
42+
value: {
43+
type: Number,
44+
default: 0,
45+
twoWay: true
46+
},
47+
label: {
48+
type: String,
49+
default: ""
50+
}
51+
},
52+
filters: {
53+
currency: {
54+
read: currencyValidator.format,
55+
write: function(newValue, oldValue) {
56+
var result = currencyValidator.parse(newValue, Number(oldValue));
57+
if (result.warning) {
58+
this.$els.input.value = result.value;
59+
}
60+
return result.value;
61+
}
62+
}
63+
},
64+
methods: {
65+
selectAll: function(event) {
66+
// Workaround for Safari bug
67+
// http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
68+
setTimeout(function() {
69+
event.target.select();
70+
}, 0);
71+
}
72+
}
73+
});
74+
75+
new Vue({
76+
el: "#app",
77+
data: {
78+
price: 0,
79+
shipping: 0,
80+
handling: 0,
81+
discount: 0
82+
},
83+
computed: {
84+
total: function() {
85+
return (
86+
(this.price * 100 +
87+
this.shipping * 100 +
88+
this.handling * 100 -
89+
this.discount * 100) /
90+
100
91+
).toFixed(2);
92+
}
93+
}
94+
});
95+
</script>
96+
</body>
97+
</html>

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "vue-10-two-way-currency-filter-v3",
3+
"version": "1.0.0",
4+
"description": "Showing how delayed state updates can cause strange behavior.",
5+
"main": "index.html",
6+
"scripts": {
7+
"start": "serve"
8+
},
9+
"keywords": [],
10+
"license": "MIT",
11+
"devDependencies": {
12+
"serve": "^11.2.0"
13+
}
14+
}

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"template": "static"
3+
}

0 commit comments

Comments
 (0)