Skip to content

Commit 60b9542

Browse files
garethxJinjiang
garethx
authored and
Jinjiang
committed
Moving external example code to the examples folder (#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 1538919 commit 60b9542

File tree

76 files changed

+2618
-22
lines changed

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

+2618
-22
lines changed

‎_config.yml

Lines changed: 5 additions & 0 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 1
66

77
> 这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据，并且以列表形式将它们展示了出来。你可以轻松地切换 master 和 dev 分支。
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 9
66

77
> 这个例子使用 [deepstreamHub](https://deepstreamhub.com/) 在客户端之间实时同步数据、发送事件、远程程序调用 (你可以多开几个浏览器窗口试一试)。
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ order: 10
55
---
66

77
> 本示例使用 [Firebase](https://firebase.google.com/) 作为数据存储后端，同时在客户端进行数据实时同步 (你可以在多个浏览器窗口去打开它来验证)。另外，它通过计算属性实时验证，并且添加／移除选项时触发 CSS 过渡。
8-
<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/pyLbpzzx/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
8+
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 3
66

77
> 本示例创建了一个可复用组件，可结合外部数据来使用它。
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 0
66

77
> 蠢萌的 Markdown 编辑器。
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 6
66

77
> 使用到的特性：组件，prop 传递，内容插入(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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 8
66

77
> 在本例中，我们整合了第三方 jQuery 插件 (select2)，怎么做到的呢？就是把它内嵌在一个常用组件中。
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 5
66

77
> 本示例展示了一个结合体，它由常用组件、计算属性、2 种绑定方式和 SVG 的支持组成。
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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ order: 11
66

77
> 本例是一个完全和规范一致的 TodoMVC 实现，只用了 120 行有效的 JavaScript (不包含注释和空行)。
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 4
66

77
> 本示例是一个简单的树形视图实现，它展现了组件的递归使用。
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

Lines changed: 88 additions & 0 deletions
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/vue@1.0/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

Lines changed: 14 additions & 0 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 61 additions & 0 deletions
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

Lines changed: 97 additions & 0 deletions
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/vue@1.0/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

Lines changed: 14 additions & 0 deletions
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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"template": "static"
3+
}

0 commit comments

Comments
 (0)