From 3b4a31f1c2a6214c589946ab4118b34cb71721ea Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 14:14:19 +0000 Subject: [PATCH 01/35] Moving example code to examples folder Example code from https://jsfiddle.net/phanan/5h0wx9np --- .../vue-20-template-compilation/index.html | 83 +++++++++++++++++++ .../vue-20-template-compilation/package.json | 14 ++++ .../sandbox.config.json | 3 + .../vue-20-template-compilation/style.css | 45 ++++++++++ 4 files changed, 145 insertions(+) create mode 100644 src/v2/examples/vue-20-template-compilation/index.html create mode 100644 src/v2/examples/vue-20-template-compilation/package.json create mode 100644 src/v2/examples/vue-20-template-compilation/sandbox.config.json create mode 100644 src/v2/examples/vue-20-template-compilation/style.css diff --git a/src/v2/examples/vue-20-template-compilation/index.html b/src/v2/examples/vue-20-template-compilation/index.html new file mode 100644 index 0000000000..b74e68f29b --- /dev/null +++ b/src/v2/examples/vue-20-template-compilation/index.html @@ -0,0 +1,83 @@ + + + + Template Compilation + + + + +
+ +
+ + 
{{ result.render }}
+ + 
_m({{ index }}): {{ fn }}
+ 
{{ result.staticRenderFns }}
+
+
+ + 
{{ result }}
+
+
+ + + + + + diff --git a/src/v2/examples/vue-20-template-compilation/package.json b/src/v2/examples/vue-20-template-compilation/package.json new file mode 100644 index 0000000000..c802e56604 --- /dev/null +++ b/src/v2/examples/vue-20-template-compilation/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-template-compilation", + "version": "1.0.0", + "description": "A demo using Vue.compile to live-compile a template string.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-template-compilation/sandbox.config.json b/src/v2/examples/vue-20-template-compilation/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-template-compilation/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-template-compilation/style.css b/src/v2/examples/vue-20-template-compilation/style.css new file mode 100644 index 0000000000..02a88e4503 --- /dev/null +++ b/src/v2/examples/vue-20-template-compilation/style.css @@ -0,0 +1,45 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; + -webkit-user-select: inherit; + user-select: inherit; + font-size: 14px; + color: #34495e; +} + +pre { + padding: 10px; + overflow-x: auto; + background: #f2f2f2; +} + +code { + white-space: pre; + padding: 0; +} + +code, +pre, +textarea { + font-family: "Roboto Mono", Monaco, courier, monospace; +} + +textarea { + width: 100%; + font-size: 14px; + margin-bottom: 8px; + border-color: #bbb; + padding: 8px; + border-bottom-width: 2px; + outline: none; + color: #34495e; +} + +textarea:focus { + background: lightyellow; +} From 40f432ead2c0b5de220606faf0395044d4581f74 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 14:34:30 +0000 Subject: [PATCH 02/35] 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 --- src/v2/guide/render-function.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/render-function.md b/src/v2/guide/render-function.md index 1678966d76..d7e462d4cc 100644 --- a/src/v2/guide/render-function.md +++ b/src/v2/guide/render-function.md @@ -642,5 +642,5 @@ For this component, `children` will give you both paragraphs, `slots().default` You may be interested to know that Vue's templates actually compile to render functions. This is an implementation detail you usually don't need to know about, but if you'd like to see how specific template features are compiled, you may find it interesting. Below is a little demo using `Vue.compile` to live-compile a template string: {% raw %} - + {% endraw %} From 51a0faa5282ac9f2ed22e996b891dbad8d707fdf Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 14:49:34 +0000 Subject: [PATCH 03/35] Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/6744xnjk --- .../vue-10-two-way-currency-filter/index.html | 56 +++++++++++++++++++ .../package.json | 14 +++++ .../sandbox.config.json | 3 + 3 files changed, 73 insertions(+) create mode 100644 src/v2/examples/vue-10-two-way-currency-filter/index.html create mode 100644 src/v2/examples/vue-10-two-way-currency-filter/package.json create mode 100644 src/v2/examples/vue-10-two-way-currency-filter/sandbox.config.json diff --git a/src/v2/examples/vue-10-two-way-currency-filter/index.html b/src/v2/examples/vue-10-two-way-currency-filter/index.html new file mode 100644 index 0000000000..e63f64f86b --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter/index.html @@ -0,0 +1,56 @@ + + + + Two-way Currency Filter + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +

Total: ${{ total }}

+
+ + + + diff --git a/src/v2/examples/vue-10-two-way-currency-filter/package.json b/src/v2/examples/vue-10-two-way-currency-filter/package.json new file mode 100644 index 0000000000..ee92d5f0a8 --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-10-two-way-currency-filter", + "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" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-10-two-way-currency-filter/sandbox.config.json b/src/v2/examples/vue-10-two-way-currency-filter/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} From 67d7249f99482a6ce63d2414e5b6235a263ad555 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 14:53:25 +0000 Subject: [PATCH 04/35] Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/943zfbsh --- .../index.html | 88 +++++++++++++++++++ .../package.json | 14 +++ .../sandbox.config.json | 3 + 3 files changed, 105 insertions(+) create mode 100644 src/v2/examples/vue-10-two-way-currency-filter-v2/index.html create mode 100644 src/v2/examples/vue-10-two-way-currency-filter-v2/package.json create mode 100644 src/v2/examples/vue-10-two-way-currency-filter-v2/sandbox.config.json diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v2/index.html b/src/v2/examples/vue-10-two-way-currency-filter-v2/index.html new file mode 100644 index 0000000000..caf5244f40 --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter-v2/index.html @@ -0,0 +1,88 @@ + + + + Two-way Currency Filter + + + + +
+ + + + + +

Total: ${{ total }}

+
+ + + + diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v2/package.json b/src/v2/examples/vue-10-two-way-currency-filter-v2/package.json new file mode 100644 index 0000000000..3dcc5dba3f --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v2/sandbox.config.json b/src/v2/examples/vue-10-two-way-currency-filter-v2/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter-v2/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} From d7ac2e132b784a773a77df22c27e5d0765611eb8 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 14:59:31 +0000 Subject: [PATCH 05/35] Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/9c32kev2 --- .../currency-validator.js | 61 ++++++++++++ .../index.html | 97 +++++++++++++++++++ .../package.json | 14 +++ .../sandbox.config.json | 3 + 4 files changed, 175 insertions(+) create mode 100644 src/v2/examples/vue-10-two-way-currency-filter-v3/currency-validator.js create mode 100644 src/v2/examples/vue-10-two-way-currency-filter-v3/index.html create mode 100644 src/v2/examples/vue-10-two-way-currency-filter-v3/package.json create mode 100644 src/v2/examples/vue-10-two-way-currency-filter-v3/sandbox.config.json diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v3/currency-validator.js b/src/v2/examples/vue-10-two-way-currency-filter-v3/currency-validator.js new file mode 100644 index 0000000000..80ab295e34 --- /dev/null +++ b/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 + ); + } + } +}; diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v3/index.html b/src/v2/examples/vue-10-two-way-currency-filter-v3/index.html new file mode 100644 index 0000000000..40d6041b2a --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter-v3/index.html @@ -0,0 +1,97 @@ + + + + Two-way Currency Filter + + + + +
+ + + + + +

Total: ${{ total }}

+
+ + + + diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v3/package.json b/src/v2/examples/vue-10-two-way-currency-filter-v3/package.json new file mode 100644 index 0000000000..082e912c93 --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v3/sandbox.config.json b/src/v2/examples/vue-10-two-way-currency-filter-v3/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter-v3/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} From 9ae0c89b3f4e1b60f4d619eb2cca777d35903851 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 15:08:46 +0000 Subject: [PATCH 06/35] Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/1oqjojjx --- .../currency-validator.js | 61 +++++++++++++ .../vue-20-two-way-currency-filter/index.html | 90 +++++++++++++++++++ .../package.json | 14 +++ .../sandbox.config.json | 3 + 4 files changed, 168 insertions(+) create mode 100644 src/v2/examples/vue-20-two-way-currency-filter/currency-validator.js create mode 100644 src/v2/examples/vue-20-two-way-currency-filter/index.html create mode 100644 src/v2/examples/vue-20-two-way-currency-filter/package.json create mode 100644 src/v2/examples/vue-20-two-way-currency-filter/sandbox.config.json diff --git a/src/v2/examples/vue-20-two-way-currency-filter/currency-validator.js b/src/v2/examples/vue-20-two-way-currency-filter/currency-validator.js new file mode 100644 index 0000000000..80ab295e34 --- /dev/null +++ b/src/v2/examples/vue-20-two-way-currency-filter/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 + ); + } + } +}; diff --git a/src/v2/examples/vue-20-two-way-currency-filter/index.html b/src/v2/examples/vue-20-two-way-currency-filter/index.html new file mode 100644 index 0000000000..5ee238cee4 --- /dev/null +++ b/src/v2/examples/vue-20-two-way-currency-filter/index.html @@ -0,0 +1,90 @@ + + + + Two-way Currency Filter + + + + +
+ + + + + +

Total: ${{ total }}

+
+ + + + diff --git a/src/v2/examples/vue-20-two-way-currency-filter/package.json b/src/v2/examples/vue-20-two-way-currency-filter/package.json new file mode 100644 index 0000000000..ef67bd57a8 --- /dev/null +++ b/src/v2/examples/vue-20-two-way-currency-filter/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-two-way-currency-filter", + "version": "1.0.0", + "description": "Using lifecycle hooks and DOM events in place of the hidden behavior of two-way filters", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} diff --git a/src/v2/examples/vue-20-two-way-currency-filter/sandbox.config.json b/src/v2/examples/vue-20-two-way-currency-filter/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-two-way-currency-filter/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} From 8c7c7defb9ea677a202813f0217b60a672402b49 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 15:23:57 +0000 Subject: [PATCH 07/35] 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 --- src/v2/guide/migration.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index cdfc996e61..dcfae9b7f2 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -1089,17 +1089,17 @@ Some users have enjoyed using two-way filters with `v-model` to create interesti As an example, we'll now walk the migration of a two-way currency filter: - + It mostly works well, but the delayed state updates can cause strange behavior. For example, click on the `Result` tab and try entering `9.999` into one of those inputs. When the input loses focus, its value will update to `$10.00`. When looking at the calculated total however, you'll see that `9.999` is what's stored in our data. The version of reality that the user sees is out of sync! To start transitioning towards a more robust solution using Vue 2.0, let's first wrap this filter in a new `` component: - + This allows us add behavior that a filter alone couldn't encapsulate, such as selecting the content of an input on focus. Now the next step will be to extract the business logic from the filter. Below, we pull everything out into an external [`currencyValidator` object](https://gist.github.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e): - + This increased modularity not only makes it easier to migrate to Vue 2, but also allows currency parsing and formatting to be: @@ -1110,7 +1110,7 @@ Having this validator extracted out, we've also more comfortably built it up int We're still limited however, by filters and by Vue 1.0 in general, so let's complete the upgrade to Vue 2.0: - + You may notice that: From 4e20c3c03387ab54510610f40cf565ec32c1916c Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 15:25:13 +0000 Subject: [PATCH 08/35] Update migration.md --- src/v2/guide/migration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index dcfae9b7f2..2cb2d4868f 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -1091,7 +1091,7 @@ As an example, we'll now walk the migration of a two-way currency filter: -It mostly works well, but the delayed state updates can cause strange behavior. For example, click on the `Result` tab and try entering `9.999` into one of those inputs. When the input loses focus, its value will update to `$10.00`. When looking at the calculated total however, you'll see that `9.999` is what's stored in our data. The version of reality that the user sees is out of sync! +It mostly works well, but the delayed state updates can cause strange behavior. For example, try entering `9.999` into one of those inputs. When the input loses focus, its value will update to `$10.00`. When looking at the calculated total however, you'll see that `9.999` is what's stored in our data. The version of reality that the user sees is out of sync! To start transitioning towards a more robust solution using Vue 2.0, let's first wrap this filter in a new `` component: From 7dc3accb9fc4610aa6ce33c7ae9a3ab6693b934f Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 15:33:52 +0000 Subject: [PATCH 09/35] Update migration.md --- src/v2/guide/migration.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index 2cb2d4868f..78599d9ae6 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -1089,17 +1089,17 @@ Some users have enjoyed using two-way filters with `v-model` to create interesti As an example, we'll now walk the migration of a two-way currency filter: - + It mostly works well, but the delayed state updates can cause strange behavior. For example, try entering `9.999` into one of those inputs. When the input loses focus, its value will update to `$10.00`. When looking at the calculated total however, you'll see that `9.999` is what's stored in our data. The version of reality that the user sees is out of sync! To start transitioning towards a more robust solution using Vue 2.0, let's first wrap this filter in a new `` component: - + This allows us add behavior that a filter alone couldn't encapsulate, such as selecting the content of an input on focus. Now the next step will be to extract the business logic from the filter. Below, we pull everything out into an external [`currencyValidator` object](https://gist.github.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e): - + This increased modularity not only makes it easier to migrate to Vue 2, but also allows currency parsing and formatting to be: @@ -1110,7 +1110,7 @@ Having this validator extracted out, we've also more comfortably built it up int We're still limited however, by filters and by Vue 1.0 in general, so let's complete the upgrade to Vue 2.0: - + You may notice that: From 3d63a4078d845e58fb53ea1e30972d3f998aeff7 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 15:59:40 +0000 Subject: [PATCH 10/35] Moving example code to examples folder Code from https://jsfiddle.net/yyx990803/mhrckqgq --- src/v2/examples/vue-20-svg-graph/index.html | 142 ++++++++++++++++++ src/v2/examples/vue-20-svg-graph/package.json | 14 ++ .../vue-20-svg-graph/sandbox.config.json | 3 + src/v2/examples/vue-20-svg-graph/style.css | 31 ++++ 4 files changed, 190 insertions(+) create mode 100644 src/v2/examples/vue-20-svg-graph/index.html create mode 100644 src/v2/examples/vue-20-svg-graph/package.json create mode 100644 src/v2/examples/vue-20-svg-graph/sandbox.config.json create mode 100644 src/v2/examples/vue-20-svg-graph/style.css diff --git a/src/v2/examples/vue-20-svg-graph/index.html b/src/v2/examples/vue-20-svg-graph/index.html new file mode 100644 index 0000000000..435a47da5e --- /dev/null +++ b/src/v2/examples/vue-20-svg-graph/index.html @@ -0,0 +1,142 @@ + + + + SVG Graph + + + + + + + + + + + +
+ + + + + +
+ + + {{stat.value}} + +
+
+ + +
+ 
{{ stats }}
+
+ +

* input[type="range"] requires IE10 or above.

+ + + + diff --git a/src/v2/examples/vue-20-svg-graph/package.json b/src/v2/examples/vue-20-svg-graph/package.json new file mode 100644 index 0000000000..afbe362f77 --- /dev/null +++ b/src/v2/examples/vue-20-svg-graph/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-svg-graph", + "version": "1.0.0", + "description": "This example showcases a combination of custom component, computed property, two-way binding and SVG support.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-svg-graph/sandbox.config.json b/src/v2/examples/vue-20-svg-graph/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-svg-graph/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-svg-graph/style.css b/src/v2/examples/vue-20-svg-graph/style.css new file mode 100644 index 0000000000..b533e006a6 --- /dev/null +++ b/src/v2/examples/vue-20-svg-graph/style.css @@ -0,0 +1,31 @@ +body { + font-family: Helvetica Neue, Arial, sans-serif; +} + +polygon { + fill: #42b983; + opacity: 0.75; +} + +circle { + fill: transparent; + stroke: #999; +} + +text { + font-family: Helvetica Neue, Arial, sans-serif; + font-size: 10px; + fill: #666; +} + +label { + display: inline-block; + margin-left: 10px; + width: 20px; +} + +#raw { + position: absolute; + top: 0; + left: 300px; +} From acc6a44b5503f4245c043bbb86c85ef01c56c8db Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 16:02:31 +0000 Subject: [PATCH 11/35] 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 --- src/v2/examples/svg.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/examples/svg.md b/src/v2/examples/svg.md index 38756f623e..f2253021a4 100644 --- a/src/v2/examples/svg.md +++ b/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. - + From 445ed26f3dec789750782963a95ebd666b42d44d Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 16:11:10 +0000 Subject: [PATCH 12/35] Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/pnqzspoe --- src/v2/examples/vue-20-tree-view/index.html | 121 ++++++++++++++++++ src/v2/examples/vue-20-tree-view/package.json | 14 ++ .../vue-20-tree-view/sandbox.config.json | 3 + src/v2/examples/vue-20-tree-view/style.css | 15 +++ 4 files changed, 153 insertions(+) create mode 100644 src/v2/examples/vue-20-tree-view/index.html create mode 100644 src/v2/examples/vue-20-tree-view/package.json create mode 100644 src/v2/examples/vue-20-tree-view/sandbox.config.json create mode 100644 src/v2/examples/vue-20-tree-view/style.css diff --git a/src/v2/examples/vue-20-tree-view/index.html b/src/v2/examples/vue-20-tree-view/index.html new file mode 100644 index 0000000000..b5aad8cca3 --- /dev/null +++ b/src/v2/examples/vue-20-tree-view/index.html @@ -0,0 +1,121 @@ + + + + Tree View + + + + + + + +

(You can double click on an item to turn it into a folder.)

+ + +
    + +
+ + + + diff --git a/src/v2/examples/vue-20-tree-view/package.json b/src/v2/examples/vue-20-tree-view/package.json new file mode 100644 index 0000000000..911f9e37e4 --- /dev/null +++ b/src/v2/examples/vue-20-tree-view/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-tree-view", + "version": "1.0.0", + "description": "Example of a simple tree view implementation showcasing recursive usage of components.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-tree-view/sandbox.config.json b/src/v2/examples/vue-20-tree-view/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-tree-view/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-tree-view/style.css b/src/v2/examples/vue-20-tree-view/style.css new file mode 100644 index 0000000000..39c9133b8c --- /dev/null +++ b/src/v2/examples/vue-20-tree-view/style.css @@ -0,0 +1,15 @@ +body { + font-family: Menlo, Consolas, monospace; + color: #444; +} +.item { + cursor: pointer; +} +.bold { + font-weight: bold; +} +ul { + padding-left: 1em; + line-height: 1.5em; + list-style-type: dot; +} From 6a58f252201d2adb0fd1c3192900aeb94a37da8c Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 16:13:05 +0000 Subject: [PATCH 13/35] 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 --- src/v2/examples/tree-view.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/examples/tree-view.md b/src/v2/examples/tree-view.md index f0d34bfe8d..14246aefa8 100644 --- a/src/v2/examples/tree-view.md +++ b/src/v2/examples/tree-view.md @@ -6,4 +6,4 @@ order: 4 > Example of a simple tree view implementation showcasing recursive usage of components. - + From 836f88abfcd3637bf45dad89005400dffb26f752 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 16:18:46 +0000 Subject: [PATCH 14/35] Moving example code to examples folder Code from https://jsfiddle.net/yyx990803/c5g8xnar --- .../examples/vue-20-github-commits/index.html | 91 +++++++++++++++++++ .../vue-20-github-commits/package.json | 14 +++ .../vue-20-github-commits/sandbox.config.json | 3 + .../examples/vue-20-github-commits/style.css | 15 +++ 4 files changed, 123 insertions(+) create mode 100644 src/v2/examples/vue-20-github-commits/index.html create mode 100644 src/v2/examples/vue-20-github-commits/package.json create mode 100644 src/v2/examples/vue-20-github-commits/sandbox.config.json create mode 100644 src/v2/examples/vue-20-github-commits/style.css diff --git a/src/v2/examples/vue-20-github-commits/index.html b/src/v2/examples/vue-20-github-commits/index.html new file mode 100644 index 0000000000..db344faee0 --- /dev/null +++ b/src/v2/examples/vue-20-github-commits/index.html @@ -0,0 +1,91 @@ + + + + GitHub Commits + + + + +
+

Latest Vue.js Commits

+ +

vuejs/vue@{{ currentBranch }}

+ +
+ + + + diff --git a/src/v2/examples/vue-20-github-commits/package.json b/src/v2/examples/vue-20-github-commits/package.json new file mode 100644 index 0000000000..8afebc6358 --- /dev/null +++ b/src/v2/examples/vue-20-github-commits/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-github-commits", + "version": "1.0.0", + "description": "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.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-github-commits/sandbox.config.json b/src/v2/examples/vue-20-github-commits/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-github-commits/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-github-commits/style.css b/src/v2/examples/vue-20-github-commits/style.css new file mode 100644 index 0000000000..c0e705b77b --- /dev/null +++ b/src/v2/examples/vue-20-github-commits/style.css @@ -0,0 +1,15 @@ +#demo { + font-family: "Helvetica", Arial, sans-serif; +} +a { + text-decoration: none; + color: #f66; +} +li { + line-height: 1.5em; + margin-bottom: 20px; +} +.author, +.date { + font-weight: bold; +} From d20ac00ad2607d73b71f8d4dc5a9859f03708ba4 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 16:20:20 +0000 Subject: [PATCH 15/35] 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 --- src/v2/examples/commits.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/examples/commits.md b/src/v2/examples/commits.md index 7481498d3a..5e8605de0d 100644 --- a/src/v2/examples/commits.md +++ b/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. - + From 37e88d2ebac48e17a6d39b9fdd61b0a31496d0d1 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 16:30:50 +0000 Subject: [PATCH 16/35] Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/d131Lebj --- .../vue-20-wrapper-component/index.html | 90 +++++++++++++++++++ .../vue-20-wrapper-component/package.json | 14 +++ .../sandbox.config.json | 3 + 3 files changed, 107 insertions(+) create mode 100644 src/v2/examples/vue-20-wrapper-component/index.html create mode 100644 src/v2/examples/vue-20-wrapper-component/package.json create mode 100644 src/v2/examples/vue-20-wrapper-component/sandbox.config.json diff --git a/src/v2/examples/vue-20-wrapper-component/index.html b/src/v2/examples/vue-20-wrapper-component/index.html new file mode 100644 index 0000000000..fc2b21cc78 --- /dev/null +++ b/src/v2/examples/vue-20-wrapper-component/index.html @@ -0,0 +1,90 @@ + + + + Wrapper Component + + + + + + + + +
+ + + + + + + + + diff --git a/src/v2/examples/vue-20-wrapper-component/package.json b/src/v2/examples/vue-20-wrapper-component/package.json new file mode 100644 index 0000000000..92fe02c5c7 --- /dev/null +++ b/src/v2/examples/vue-20-wrapper-component/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-wrapper-component", + "version": "1.0.0", + "description": "In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-wrapper-component/sandbox.config.json b/src/v2/examples/vue-20-wrapper-component/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-wrapper-component/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} From cb0a2beed0e237fac4987d9dcdbff5dd69a42bfc Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 16:32:26 +0000 Subject: [PATCH 17/35] 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 --- src/v2/examples/select2.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/examples/select2.md b/src/v2/examples/select2.md index 0731a39471..0cc78de91b 100644 --- a/src/v2/examples/select2.md +++ b/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. - + From 402e8d7a3972abcc2c85d13d16e0340922e23ad9 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 16:36:56 +0000 Subject: [PATCH 18/35] Moving example code to examples folder Code from https://jsfiddle.net/yyx990803/mwLbw11k --- .../vue-20-modal-component/index.html | 69 +++++++++++++++++++ .../vue-20-modal-component/package.json | 14 ++++ .../sandbox.config.json | 3 + .../examples/vue-20-modal-component/style.css | 63 +++++++++++++++++ 4 files changed, 149 insertions(+) create mode 100644 src/v2/examples/vue-20-modal-component/index.html create mode 100644 src/v2/examples/vue-20-modal-component/package.json create mode 100644 src/v2/examples/vue-20-modal-component/sandbox.config.json create mode 100644 src/v2/examples/vue-20-modal-component/style.css diff --git a/src/v2/examples/vue-20-modal-component/index.html b/src/v2/examples/vue-20-modal-component/index.html new file mode 100644 index 0000000000..a6cb246586 --- /dev/null +++ b/src/v2/examples/vue-20-modal-component/index.html @@ -0,0 +1,69 @@ + + + + Modal Component + + + + + + + +
+ + + + +

custom header

+ +
+ + + + diff --git a/src/v2/examples/vue-20-modal-component/package.json b/src/v2/examples/vue-20-modal-component/package.json new file mode 100644 index 0000000000..6d64ba2432 --- /dev/null +++ b/src/v2/examples/vue-20-modal-component/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-modal-component", + "version": "1.0.0", + "description": "Features used: component, prop passing, content insertion, transitions.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-modal-component/sandbox.config.json b/src/v2/examples/vue-20-modal-component/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-modal-component/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-modal-component/style.css b/src/v2/examples/vue-20-modal-component/style.css new file mode 100644 index 0000000000..d36f166fb4 --- /dev/null +++ b/src/v2/examples/vue-20-modal-component/style.css @@ -0,0 +1,63 @@ +.modal-mask { + position: fixed; + z-index: 9998; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: table; + transition: opacity 0.3s ease; +} + +.modal-wrapper { + display: table-cell; + vertical-align: middle; +} + +.modal-container { + width: 300px; + margin: 0px auto; + padding: 20px 30px; + background-color: #fff; + border-radius: 2px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); + transition: all 0.3s ease; + font-family: Helvetica, Arial, sans-serif; +} + +.modal-header h3 { + margin-top: 0; + color: #42b983; +} + +.modal-body { + margin: 20px 0; +} + +.modal-default-button { + float: right; +} + +/* + * The following styles are auto-applied to elements with + * transition="modal" when their visibility is toggled + * by Vue.js. + * + * You can easily play with the modal transition by editing + * these styles. + */ + +.modal-enter { + opacity: 0; +} + +.modal-leave-active { + opacity: 0; +} + +.modal-enter .modal-container, +.modal-leave-active .modal-container { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} From 3931c1d3efaecde32bf8fdad735dd5f4023525bf Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 16:38:35 +0000 Subject: [PATCH 19/35] 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 --- src/v2/examples/modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/examples/modal.md b/src/v2/examples/modal.md index fc1e0a9e3f..3962c3c68f 100644 --- a/src/v2/examples/modal.md +++ b/src/v2/examples/modal.md @@ -6,4 +6,4 @@ order: 6 > Features used: component, prop passing, content insertion, transitions. - + From 742eba035e337b2f99d069422c4e20e8267f5acf Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 16:51:57 +0000 Subject: [PATCH 20/35] Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/0dzvcf4d --- .../vue-20-markdown-editor/index.html | 35 +++++++++++++++++++ .../vue-20-markdown-editor/package.json | 14 ++++++++ .../sandbox.config.json | 3 ++ .../examples/vue-20-markdown-editor/style.css | 33 +++++++++++++++++ 4 files changed, 85 insertions(+) create mode 100644 src/v2/examples/vue-20-markdown-editor/index.html create mode 100644 src/v2/examples/vue-20-markdown-editor/package.json create mode 100644 src/v2/examples/vue-20-markdown-editor/sandbox.config.json create mode 100644 src/v2/examples/vue-20-markdown-editor/style.css diff --git a/src/v2/examples/vue-20-markdown-editor/index.html b/src/v2/examples/vue-20-markdown-editor/index.html new file mode 100644 index 0000000000..0e13a58ee6 --- /dev/null +++ b/src/v2/examples/vue-20-markdown-editor/index.html @@ -0,0 +1,35 @@ + + + + Markdown Editor + + + + + + +
+ +
+
+ + + + diff --git a/src/v2/examples/vue-20-markdown-editor/package.json b/src/v2/examples/vue-20-markdown-editor/package.json new file mode 100644 index 0000000000..7866640c16 --- /dev/null +++ b/src/v2/examples/vue-20-markdown-editor/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-markdown-editor", + "version": "1.0.0", + "description": "Dead simple Markdown editor.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-markdown-editor/sandbox.config.json b/src/v2/examples/vue-20-markdown-editor/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-markdown-editor/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-markdown-editor/style.css b/src/v2/examples/vue-20-markdown-editor/style.css new file mode 100644 index 0000000000..01cacdc9d3 --- /dev/null +++ b/src/v2/examples/vue-20-markdown-editor/style.css @@ -0,0 +1,33 @@ +html, +body, +#editor { + margin: 0; + height: 100%; + font-family: "Helvetica Neue", Arial, sans-serif; + color: #333; +} + +textarea, +#editor div { + display: inline-block; + width: 49%; + height: 100%; + vertical-align: top; + box-sizing: border-box; + padding: 0 20px; +} + +textarea { + border: none; + border-right: 1px solid #ccc; + resize: none; + outline: none; + background-color: #f6f6f6; + font-size: 14px; + font-family: "Monaco", courier, monospace; + padding: 20px; +} + +code { + color: #f66; +} From e5b75a306e22f32a888655cdffe68f61d4ac7eb6 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 16:53:49 +0000 Subject: [PATCH 21/35] 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 --- src/v2/examples/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/examples/index.md b/src/v2/examples/index.md index 5fdff15702..9ffe5ea9a7 100644 --- a/src/v2/examples/index.md +++ b/src/v2/examples/index.md @@ -6,4 +6,4 @@ order: 0 > Dead simple Markdown editor. - + From 0368c8a6c997dfc94c1300b726cfe70d195c3119 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 17:01:45 +0000 Subject: [PATCH 22/35] Moving example code to examples folder Code from https://jsfiddle.net/yyx990803/y91wy85p --- .../examples/vue-20-elastic-header/index.html | 115 ++++++++++++++++++ .../vue-20-elastic-header/package.json | 14 +++ .../vue-20-elastic-header/sandbox.config.json | 3 + .../examples/vue-20-elastic-header/style.css | 45 +++++++ 4 files changed, 177 insertions(+) create mode 100644 src/v2/examples/vue-20-elastic-header/index.html create mode 100644 src/v2/examples/vue-20-elastic-header/package.json create mode 100644 src/v2/examples/vue-20-elastic-header/sandbox.config.json create mode 100644 src/v2/examples/vue-20-elastic-header/style.css diff --git a/src/v2/examples/vue-20-elastic-header/index.html b/src/v2/examples/vue-20-elastic-header/index.html new file mode 100644 index 0000000000..26d74a1a5e --- /dev/null +++ b/src/v2/examples/vue-20-elastic-header/index.html @@ -0,0 +1,115 @@ + + + + Elastic Header + + + + + + + +
+ + + + +
+ + + + diff --git a/src/v2/examples/vue-20-elastic-header/package.json b/src/v2/examples/vue-20-elastic-header/package.json new file mode 100644 index 0000000000..6362227733 --- /dev/null +++ b/src/v2/examples/vue-20-elastic-header/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-elastic-header", + "version": "1.0.0", + "description": "Elastic Draggable SVG Header", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-elastic-header/sandbox.config.json b/src/v2/examples/vue-20-elastic-header/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-elastic-header/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-elastic-header/style.css b/src/v2/examples/vue-20-elastic-header/style.css new file mode 100644 index 0000000000..f3fc3f0b5c --- /dev/null +++ b/src/v2/examples/vue-20-elastic-header/style.css @@ -0,0 +1,45 @@ +h1 { + font-weight: 300; + font-size: 1.8em; + margin-top: 0; +} +a { + color: #fff; +} +.draggable-header-view { + background-color: #fff; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); + width: 320px; + height: 560px; + overflow: hidden; + margin: 30px auto; + position: relative; + font-family: "Roboto", Helvetica, Arial, sans-serif; + color: #fff; + font-size: 14px; + font-weight: 300; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.draggable-header-view .bg { + position: absolute; + top: 0; + left: 0; + z-index: 0; +} +.draggable-header-view .header, +.draggable-header-view .content { + position: relative; + z-index: 1; + padding: 30px; + box-sizing: border-box; +} +.draggable-header-view .header { + height: 160px; +} +.draggable-header-view .content { + color: #333; + line-height: 1.5em; +} From f98e7675d3434cef1482575409a1bbe03b266f2b Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 17:03:23 +0000 Subject: [PATCH 23/35] 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 --- src/v2/examples/elastic-header.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/examples/elastic-header.md b/src/v2/examples/elastic-header.md index 186ba37a92..4fc65add3b 100644 --- a/src/v2/examples/elastic-header.md +++ b/src/v2/examples/elastic-header.md @@ -4,4 +4,4 @@ type: examples order: 7 --- - + From 1f5e7d51b584aedca31111e450fe2f0549554e8d Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 17:10:22 +0000 Subject: [PATCH 24/35] Moving example code to examples folder Code from https://jsfiddle.net/yyx990803/ff0sp9hw --- .../index.html | 184 ++++++++++++++++++ .../package.json | 14 ++ .../sandbox.config.json | 3 + .../style.css | 122 ++++++++++++ 4 files changed, 323 insertions(+) create mode 100644 src/v2/examples/vue-20-realtime-with-deepstreamhub/index.html create mode 100644 src/v2/examples/vue-20-realtime-with-deepstreamhub/package.json create mode 100644 src/v2/examples/vue-20-realtime-with-deepstreamhub/sandbox.config.json create mode 100644 src/v2/examples/vue-20-realtime-with-deepstreamhub/style.css diff --git a/src/v2/examples/vue-20-realtime-with-deepstreamhub/index.html b/src/v2/examples/vue-20-realtime-with-deepstreamhub/index.html new file mode 100644 index 0000000000..639319a9dc --- /dev/null +++ b/src/v2/examples/vue-20-realtime-with-deepstreamhub/index.html @@ -0,0 +1,184 @@ + + + + Realtime with deepstreamHub + + + + + + + +
+
+ Connection-State is: {{connectionState}} +
+ + + +
+ + + + + + + + + + diff --git a/src/v2/examples/vue-20-realtime-with-deepstreamhub/package.json b/src/v2/examples/vue-20-realtime-with-deepstreamhub/package.json new file mode 100644 index 0000000000..abf1458b23 --- /dev/null +++ b/src/v2/examples/vue-20-realtime-with-deepstreamhub/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-realtime-with-deepstreamhub", + "version": "1.0.0", + "description": "This example uses deepstreamHub to synchronize realtime data, send events and make remote procedure calls between clients (you can try opening it in multiple browser windows).", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-realtime-with-deepstreamhub/sandbox.config.json b/src/v2/examples/vue-20-realtime-with-deepstreamhub/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-realtime-with-deepstreamhub/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-realtime-with-deepstreamhub/style.css b/src/v2/examples/vue-20-realtime-with-deepstreamhub/style.css new file mode 100644 index 0000000000..b643051dfb --- /dev/null +++ b/src/v2/examples/vue-20-realtime-with-deepstreamhub/style.css @@ -0,0 +1,122 @@ +* { + margin: 0; + padding: 0; + list-style-type: none; + font-family: RobotoCondensed, sans-serif; + font-size: 14px; + color: #333; + box-sizing: border-box; + outline: none; + transition: all 200ms ease; +} + +body { + background-color: #fff; +} + +.group { + width: 80%; + max-width: 800px; + margin: 40px auto; + padding: 20px; + position: relative; + overflow: hidden; +} + +.group.connectionState { + margin: 10px auto 0; + padding: 0 20px; +} + +h2 { + font-size: 20px; + border-bottom: 1px solid #ccc; + padding-bottom: 4px; + margin-bottom: 10px; + position: relative; +} + +h2 small { + position: absolute; + right: 0; +} + +h2 small * { + display: inline-block; + vertical-align: middle; + font-weight: normal; + color: #333; + font-size: 12px; + cursor: pointer; +} + +button, +input, +.item { + height: 32px; + padding: 6px; +} + +button { + border: none; + background: #7185ec; + color: #fff; + font-weight: 500; + border-radius: 4px; + cursor: pointer; + text-align: center; + cursor: pointer; + font-weight: bold; + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2); +} + +button:hover { + background-color: #586cd8; +} + +button:active { + position: relative; + top: 1px; + left: 1px; + box-shadow: none; +} + +.half { + width: 48%; + float: left; + position: relative; +} + +.half.left { + margin-right: 4%; +} + +label { + font-size: 11px; + font-style: italic; +} + +input { + border-radius: 4px; + border: 1px solid #ccc; +} + +input:focus { + border-color: #7185ec; +} + +.input-group input { + width: 100%; +} + +span.response { + display: inline-block; + background-color: #dddddd; +} + +@media screen and (max-width: 900px) { + .half { + width: 100%; + margin: 0 0 10px !important; + } +} From 3862d0e8a79a6b1502eeb0489ea3fbef2a4924a6 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 17:12:56 +0000 Subject: [PATCH 25/35] 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 --- src/v2/examples/deepstream.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/examples/deepstream.md b/src/v2/examples/deepstream.md index 382e3bd3b8..c3e159cfc8 100644 --- a/src/v2/examples/deepstream.md +++ b/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). - + From 6eca6102544351a823cd6fc1d46693bc4d5610d2 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 17:17:29 +0000 Subject: [PATCH 26/35] Moving example code to examples folder Code from https://jsfiddle.net/chrisvfritz/pyLbpzzx --- .../vue-20-firebase-validation/index.html | 96 +++++++++++++++++++ .../vue-20-firebase-validation/package.json | 14 +++ .../sandbox.config.json | 3 + .../vue-20-firebase-validation/style.css | 33 +++++++ 4 files changed, 146 insertions(+) create mode 100644 src/v2/examples/vue-20-firebase-validation/index.html create mode 100644 src/v2/examples/vue-20-firebase-validation/package.json create mode 100644 src/v2/examples/vue-20-firebase-validation/sandbox.config.json create mode 100644 src/v2/examples/vue-20-firebase-validation/style.css diff --git a/src/v2/examples/vue-20-firebase-validation/index.html b/src/v2/examples/vue-20-firebase-validation/index.html new file mode 100644 index 0000000000..1335839c1d --- /dev/null +++ b/src/v2/examples/vue-20-firebase-validation/index.html @@ -0,0 +1,96 @@ + + + + Firebase + Validation + + + + + + + +
+
    +
  • + {{user.name}} - {{user.email}} + +
    • +
+
+ + + +
+
    +
  • Name cannot be empty.
    • +
  • + Please provide a valid email address. +
    • +
+
+ + + + diff --git a/src/v2/examples/vue-20-firebase-validation/package.json b/src/v2/examples/vue-20-firebase-validation/package.json new file mode 100644 index 0000000000..570fb291d7 --- /dev/null +++ b/src/v2/examples/vue-20-firebase-validation/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-firebase-validation", + "version": "1.0.0", + "description": "This example uses Firebase 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.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-firebase-validation/sandbox.config.json b/src/v2/examples/vue-20-firebase-validation/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-firebase-validation/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-firebase-validation/style.css b/src/v2/examples/vue-20-firebase-validation/style.css new file mode 100644 index 0000000000..761054c0c1 --- /dev/null +++ b/src/v2/examples/vue-20-firebase-validation/style.css @@ -0,0 +1,33 @@ +body { + font-family: Helvetica, Arial, sans-serif; +} + +ul { + padding: 0; +} + +.user { + height: 30px; + line-height: 30px; + padding: 10px; + border-top: 1px solid #eee; + overflow: hidden; + transition: all 0.25s ease; +} + +.user:last-child { + border-bottom: 1px solid #eee; +} + +.v-enter, +.v-leave-active { + height: 0; + padding-top: 0; + padding-bottom: 0; + border-top-width: 0; + border-bottom-width: 0; +} + +.errors { + color: #f00; +} From 297858f08b2ce10af68bf136a573f07c1dbb9959 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 17:18:38 +0000 Subject: [PATCH 27/35] 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 --- src/v2/examples/firebase.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/examples/firebase.md b/src/v2/examples/firebase.md index e67c6c0f7c..f600658b4c 100644 --- a/src/v2/examples/firebase.md +++ b/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. - + From be5e5ba76605f726bb729a09749a01742d817615 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 17:26:11 +0000 Subject: [PATCH 28/35] Moving example code to examples folder Code from https://jsfiddle.net/yyx990803/4dr2fLb7 --- src/v2/examples/vue-20-todomvc/index.html | 258 ++++++++++++++++++ src/v2/examples/vue-20-todomvc/package.json | 14 + .../vue-20-todomvc/sandbox.config.json | 3 + 3 files changed, 275 insertions(+) create mode 100644 src/v2/examples/vue-20-todomvc/index.html create mode 100644 src/v2/examples/vue-20-todomvc/package.json create mode 100644 src/v2/examples/vue-20-todomvc/sandbox.config.json diff --git a/src/v2/examples/vue-20-todomvc/index.html b/src/v2/examples/vue-20-todomvc/index.html new file mode 100644 index 0000000000..78337e1867 --- /dev/null +++ b/src/v2/examples/vue-20-todomvc/index.html @@ -0,0 +1,258 @@ + + + + TodoMVC + + + + + +
+
+

todos

+ +
+
+ + +
    +
  • +
    + + + +
    + +
    • +
+
+
+ + {{ remaining }} {{ remaining | pluralize }} left + + + +
+
+ + + + + diff --git a/src/v2/examples/vue-20-todomvc/package.json b/src/v2/examples/vue-20-todomvc/package.json new file mode 100644 index 0000000000..8fb7dbe6d5 --- /dev/null +++ b/src/v2/examples/vue-20-todomvc/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-todomvc", + "version": "1.0.0", + "description": "This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines).", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-todomvc/sandbox.config.json b/src/v2/examples/vue-20-todomvc/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-todomvc/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} From fbe2c8e6dc7ea3110924849e7e33fd8c254eada2 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 29 Jan 2020 17:27:59 +0000 Subject: [PATCH 29/35] 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 --- src/v2/examples/todomvc.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/examples/todomvc.md b/src/v2/examples/todomvc.md index b3eee18d9a..426ee15235 100644 --- a/src/v2/examples/todomvc.md +++ b/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). -

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.

+

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.

- + From b92db4f994fa3922fd762829275fff5a445352df Mon Sep 17 00:00:00 2001 From: garethx Date: Thu, 30 Jan 2020 09:51:15 +0000 Subject: [PATCH 30/35] Moving example code to examples folder Code from https://jsfiddle.net/Tertia/vbyon64p/6 --- .../examples/vue-20-grid-component/index.html | 121 ++++++++++++++++++ .../vue-20-grid-component/package.json | 14 ++ .../vue-20-grid-component/sandbox.config.json | 3 + .../examples/vue-20-grid-component/style.css | 60 +++++++++ 4 files changed, 198 insertions(+) create mode 100644 src/v2/examples/vue-20-grid-component/index.html create mode 100644 src/v2/examples/vue-20-grid-component/package.json create mode 100644 src/v2/examples/vue-20-grid-component/sandbox.config.json create mode 100644 src/v2/examples/vue-20-grid-component/style.css diff --git a/src/v2/examples/vue-20-grid-component/index.html b/src/v2/examples/vue-20-grid-component/index.html new file mode 100644 index 0000000000..43b96ea545 --- /dev/null +++ b/src/v2/examples/vue-20-grid-component/index.html @@ -0,0 +1,121 @@ + + + + Grid Component + + + + + + + + +
+ + + +
+ + + + diff --git a/src/v2/examples/vue-20-grid-component/package.json b/src/v2/examples/vue-20-grid-component/package.json new file mode 100644 index 0000000000..1734610da9 --- /dev/null +++ b/src/v2/examples/vue-20-grid-component/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-grid-component", + "version": "1.0.0", + "description": "This is an example of creating a reusable grid component and using it with external data.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-grid-component/sandbox.config.json b/src/v2/examples/vue-20-grid-component/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-grid-component/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-grid-component/style.css b/src/v2/examples/vue-20-grid-component/style.css new file mode 100644 index 0000000000..f10002ab8f --- /dev/null +++ b/src/v2/examples/vue-20-grid-component/style.css @@ -0,0 +1,60 @@ +body { + font-family: Helvetica Neue, Arial, sans-serif; + font-size: 14px; + color: #444; +} + +table { + border: 2px solid #42b983; + border-radius: 3px; + background-color: #fff; +} + +th { + background-color: #42b983; + color: rgba(255, 255, 255, 0.66); + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +td { + background-color: #f9f9f9; +} + +th, +td { + min-width: 120px; + padding: 10px 20px; +} + +th.active { + color: #fff; +} + +th.active .arrow { + opacity: 1; +} + +.arrow { + display: inline-block; + vertical-align: middle; + width: 0; + height: 0; + margin-left: 5px; + opacity: 0.66; +} + +.arrow.asc { + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 4px solid #fff; +} + +.arrow.dsc { + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #fff; +} From a823221820ab1ed2d218ed05af4d7d4058f18cdc Mon Sep 17 00:00:00 2001 From: garethx Date: Thu, 30 Jan 2020 09:53:15 +0000 Subject: [PATCH 31/35] 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 --- src/v2/examples/grid-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/examples/grid-component.md b/src/v2/examples/grid-component.md index 41bc7f5015..dd4330f6e1 100644 --- a/src/v2/examples/grid-component.md +++ b/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. - + From 9e852ddeb07592d111110e3130afbe47fd395002 Mon Sep 17 00:00:00 2001 From: garethx Date: Thu, 30 Jan 2020 10:15:56 +0000 Subject: [PATCH 32/35] Fixing typo --- src/v2/guide/single-file-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index fb4c5a4c5d..e576979679 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -21,7 +21,7 @@ All of these are solved by **single-file components** with a `.vue` extension, m Here's an example of a file we'll call `Hello.vue`: -Single-file component example (click for code as text) +Single-file component example (click for code as text) Now we get: From 77f349f94826ad15f064bef1e855df5c91bbf2b4 Mon Sep 17 00:00:00 2001 From: garethx Date: Mon, 10 Feb 2020 10:56:16 +0000 Subject: [PATCH 33/35] Removing unnecessary raw tags --- src/v2/guide/render-function.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/v2/guide/render-function.md b/src/v2/guide/render-function.md index d7e462d4cc..f0a35eba8c 100644 --- a/src/v2/guide/render-function.md +++ b/src/v2/guide/render-function.md @@ -641,6 +641,4 @@ For this component, `children` will give you both paragraphs, `slots().default` You may be interested to know that Vue's templates actually compile to render functions. This is an implementation detail you usually don't need to know about, but if you'd like to see how specific template features are compiled, you may find it interesting. Below is a little demo using `Vue.compile` to live-compile a template string: -{% raw %} -{% endraw %} From 071bf4c594f8bf80b8a63f508b6048046c3e5808 Mon Sep 17 00:00:00 2001 From: garethx Date: Mon, 10 Feb 2020 11:28:11 +0000 Subject: [PATCH 34/35] Removing zero width characters --- assets/why-vue/arabic.js.srt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/why-vue/arabic.js.srt b/assets/why-vue/arabic.js.srt index 0388f0dd2d..af61b3d07c 100644 --- a/assets/why-vue/arabic.js.srt +++ b/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 From b5f63ffd8a6ff21992d6e6e820fc4b9e93865524 Mon Sep 17 00:00:00 2001 From: garethx Date: Mon, 10 Feb 2020 12:52:08 +0000 Subject: [PATCH 35/35] 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. --- _config.yml | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/_config.yml b/_config.yml index 9c3d2eeeea..6a54967667 100644 --- a/_config.yml +++ b/_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