chore: add a few 2.x examples
This commit is contained in:
Evan You
parent
24f6d63c6a
commit
e0a9cf5ace
78
packages/vue/examples/classic/commits.html
Normal file
78
packages/vue/examples/classic/commits.html
Normal file
@ -0,0 +1,78 @@
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
|
||||
<div id="demo">
|
||||
<h1>Latest Vue.js Commits</h1>
|
||||
<template v-for="branch in branches">
|
||||
<input type="radio"
|
||||
:id="branch"
|
||||
:value="branch"
|
||||
name="branch"
|
||||
v-model="currentBranch">
|
||||
<label :for="branch">{{ branch }}</label>
|
||||
</template>
|
||||
<p>vuejs/vue@{{ currentBranch }}</p>
|
||||
<ul>
|
||||
<li v-for="{ html_url, sha, author, commit } in commits">
|
||||
<a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
|
||||
- <span class="message">{{ truncate(commit.message) }}</span><br>
|
||||
by <span class="author"><a :href="author.html_url" target="_blank">{{ commit.author.name }}</a></span>
|
||||
at <span class="date">{{ formatDate(commit.author.date) }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`
|
||||
|
||||
const App = {
|
||||
data: {
|
||||
branches: ['master', 'sync'],
|
||||
currentBranch: 'master',
|
||||
commits: null
|
||||
},
|
||||
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentBranch: 'fetchData'
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchData() {
|
||||
fetch(`${API_URL}${this.currentBranch}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
this.commits = data
|
||||
})
|
||||
},
|
||||
truncate(v) {
|
||||
const newline = v.indexOf('\n')
|
||||
return newline > 0 ? v.slice(0, newline) : v
|
||||
},
|
||||
formatDate(v) {
|
||||
return v.replace(/T|Z/g, ' ')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#demo')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#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;
|
||||
}
|
||||
</style>
|
||||
169
packages/vue/examples/classic/grid.html
Normal file
169
packages/vue/examples/classic/grid.html
Normal file
@ -0,0 +1,169 @@
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
|
||||
<!-- DemoGrid component template -->
|
||||
<script type="text/x-template" id="grid-template">
|
||||
<table v-if="filteredData.length">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="key in columns"
|
||||
@click="sortBy(key)"
|
||||
:class="{ active: sortKey == key }">
|
||||
{{ capitalize(key) }}
|
||||
<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="entry in filteredData">
|
||||
<td v-for="key in columns">
|
||||
{{entry[key]}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p v-else>No matches found.</p>
|
||||
</script>
|
||||
<!-- DemoGrid component script -->
|
||||
<script>
|
||||
const DemoGrid = {
|
||||
template: '#grid-template',
|
||||
props: {
|
||||
data: Array,
|
||||
columns: Array,
|
||||
filterKey: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sortKey: '',
|
||||
sortOrders: this.columns.reduce((o, key) => (o[key] = 1, o), {})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredData() {
|
||||
const sortKey = this.sortKey
|
||||
const filterKey = this.filterKey && this.filterKey.toLowerCase()
|
||||
const order = this.sortOrders[sortKey] || 1
|
||||
let data = this.data
|
||||
if (filterKey) {
|
||||
data = data.filter(row => {
|
||||
return Object.keys(row).some(key => {
|
||||
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
|
||||
})
|
||||
})
|
||||
}
|
||||
if (sortKey) {
|
||||
data = data.slice().sort((a, b) => {
|
||||
a = a[sortKey]
|
||||
b = b[sortKey]
|
||||
return (a === b ? 0 : a > b ? 1 : -1) * order
|
||||
})
|
||||
}
|
||||
return data
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sortBy(key) {
|
||||
this.sortKey = key
|
||||
this.sortOrders[key] = this.sortOrders[key] * -1
|
||||
},
|
||||
capitalize(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- App template (in DOM) -->
|
||||
<div id="demo">
|
||||
<form id="search">
|
||||
Search <input name="query" v-model="searchQuery">
|
||||
</form>
|
||||
<demo-grid
|
||||
:data="gridData"
|
||||
:columns="gridColumns"
|
||||
:filter-key="searchQuery">
|
||||
</demo-grid>
|
||||
</div>
|
||||
<!-- App script -->
|
||||
<script>
|
||||
const App = {
|
||||
components: {
|
||||
DemoGrid
|
||||
},
|
||||
data: {
|
||||
searchQuery: '',
|
||||
gridColumns: ['name', 'power'],
|
||||
gridData: [
|
||||
{ name: 'Chuck Norris', power: Infinity },
|
||||
{ name: 'Bruce Lee', power: 9000 },
|
||||
{ name: 'Jackie Chan', power: 7000 },
|
||||
{ name: 'Jet Li', power: 8000 }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#demo')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
177
packages/vue/examples/classic/svg.html
Normal file
177
packages/vue/examples/classic/svg.html
Normal file
@ -0,0 +1,177 @@
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
<script>
|
||||
// math helper...
|
||||
function valueToPoint (value, index, total) {
|
||||
var x = 0
|
||||
var y = -value * 0.8
|
||||
var angle = Math.PI * 2 / total * index
|
||||
var cos = Math.cos(angle)
|
||||
var sin = Math.sin(angle)
|
||||
var tx = x * cos - y * sin + 100
|
||||
var ty = x * sin + y * cos + 100
|
||||
return {
|
||||
x: tx,
|
||||
y: ty
|
||||
}
|
||||
}
|
||||
|
||||
const AxisLabel = {
|
||||
template: '<text :x="point.x" :y="point.y">{{stat.label}}</text>',
|
||||
props: {
|
||||
stat: Object,
|
||||
index: Number,
|
||||
total: Number
|
||||
},
|
||||
computed: {
|
||||
point: function () {
|
||||
return valueToPoint(
|
||||
+this.stat.value + 10,
|
||||
this.index,
|
||||
this.total
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- template for the polygraph component. -->
|
||||
<script type="text/x-template" id="polygraph-template">
|
||||
<g>
|
||||
<polygon :points="points"></polygon>
|
||||
<circle cx="100" cy="100" r="80"></circle>
|
||||
<axis-label
|
||||
v-for="(stat, index) in stats"
|
||||
:stat="stat"
|
||||
:index="index"
|
||||
:total="stats.length">
|
||||
</axis-label>
|
||||
</g>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const Polygraph = {
|
||||
props: ['stats'],
|
||||
template: '#polygraph-template',
|
||||
computed: {
|
||||
// a computed property for the polygon's points
|
||||
points() {
|
||||
const total = this.stats.length
|
||||
return this.stats.map((stat, i) => {
|
||||
const point = valueToPoint(stat.value, i, total)
|
||||
return point.x + ',' + point.y
|
||||
}).join(' ')
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AxisLabel
|
||||
}
|
||||
}
|
||||
|
||||
// math helper...
|
||||
function valueToPoint (value, index, total) {
|
||||
var x = 0
|
||||
var y = -value * 0.8
|
||||
var angle = Math.PI * 2 / total * index
|
||||
var cos = Math.cos(angle)
|
||||
var sin = Math.sin(angle)
|
||||
var tx = x * cos - y * sin + 100
|
||||
var ty = x * sin + y * cos + 100
|
||||
return {
|
||||
x: tx,
|
||||
y: ty
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- demo root element -->
|
||||
<div id="demo">
|
||||
<!-- Use the polygraph component -->
|
||||
<svg width="200" height="200">
|
||||
<polygraph :stats="stats"></polygraph>
|
||||
</svg>
|
||||
<!-- controls -->
|
||||
<div v-for="stat in stats">
|
||||
<label>{{stat.label}}</label>
|
||||
<input type="range" v-model="stat.value" min="0" max="100">
|
||||
<span>{{stat.value}}</span>
|
||||
<button @click="remove(stat)" class="remove">X</button>
|
||||
</div>
|
||||
<form id="add">
|
||||
<input name="newlabel" v-model="newLabel">
|
||||
<button @click="add">Add a Stat</button>
|
||||
</form>
|
||||
<pre id="raw">{{ stats }}</pre>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const App = {
|
||||
components: {
|
||||
Polygraph
|
||||
},
|
||||
data: {
|
||||
newLabel: '',
|
||||
stats: [
|
||||
{ label: 'A', value: 100 },
|
||||
{ label: 'B', value: 100 },
|
||||
{ label: 'C', value: 100 },
|
||||
{ label: 'D', value: 100 },
|
||||
{ label: 'E', value: 100 },
|
||||
{ label: 'F', value: 100 }
|
||||
]
|
||||
},
|
||||
methods: {
|
||||
add(e) {
|
||||
e.preventDefault()
|
||||
if (!this.newLabel) return
|
||||
this.stats.push({
|
||||
label: this.newLabel,
|
||||
value: 100
|
||||
})
|
||||
this.newLabel = ''
|
||||
},
|
||||
remove(stat) {
|
||||
if (this.stats.length > 3) {
|
||||
this.stats.splice(this.stats.indexOf(stat), 1)
|
||||
} else {
|
||||
alert('Can\'t delete more!')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#demo')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: Helvetica Neue, Arial, sans-serif;
|
||||
}
|
||||
|
||||
polygon {
|
||||
fill: #42b983;
|
||||
opacity: .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;
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +1,4 @@
|
||||
<script src="../dist/vue.global.js"></script>
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css">
|
||||
|
||||
<div id="app">
|
||||
74
packages/vue/examples/composition/commits.html
Normal file
74
packages/vue/examples/composition/commits.html
Normal file
@ -0,0 +1,74 @@
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
|
||||
<div id="demo">
|
||||
<h1>Latest Vue.js Commits</h1>
|
||||
<template v-for="branch in branches">
|
||||
<input type="radio"
|
||||
:id="branch"
|
||||
:value="branch"
|
||||
name="branch"
|
||||
v-model="currentBranch">
|
||||
<label :for="branch">{{ branch }}</label>
|
||||
</template>
|
||||
<p>vuejs/vue@{{ currentBranch }}</p>
|
||||
<ul>
|
||||
<li v-for="{ html_url, sha, author, commit } in commits">
|
||||
<a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
|
||||
- <span class="message">{{ truncate(commit.message) }}</span><br>
|
||||
by <span class="author"><a :href="author.html_url" target="_blank">{{ commit.author.name }}</a></span>
|
||||
at <span class="date">{{ formatDate(commit.author.date) }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp, ref, watch } = Vue
|
||||
const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`
|
||||
|
||||
const truncate = v => {
|
||||
const newline = v.indexOf('\n')
|
||||
return newline > 0 ? v.slice(0, newline) : v
|
||||
}
|
||||
|
||||
const formatDate = v => v.replace(/T|Z/g, ' ')
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const currentBranch = ref('master')
|
||||
const commits = ref(null)
|
||||
|
||||
watch(() => {
|
||||
fetch(`${API_URL}${currentBranch.value}`)
|
||||
.then(res => res.json())
|
||||
.then(data => { commits.value = data })
|
||||
})
|
||||
|
||||
return {
|
||||
branches: ['master', 'sync'],
|
||||
currentBranch,
|
||||
commits,
|
||||
truncate,
|
||||
formatDate
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
createApp().mount(App, '#demo')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#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;
|
||||
}
|
||||
</style>
|
||||
175
packages/vue/examples/composition/grid.html
Normal file
175
packages/vue/examples/composition/grid.html
Normal file
@ -0,0 +1,175 @@
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
|
||||
<!-- DemoGrid component template -->
|
||||
<script type="text/x-template" id="grid-template">
|
||||
<table v-if="filteredData.length">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="key in columns"
|
||||
@click="sortBy(key)"
|
||||
:class="{ active: sortKey == key }">
|
||||
{{ capitalize(key) }}
|
||||
<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="entry in filteredData">
|
||||
<td v-for="key in columns">
|
||||
{{entry[key]}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p v-else>No matches found.</p>
|
||||
</script>
|
||||
<!-- DemoGrid component script -->
|
||||
<script>
|
||||
const { reactive, computed } = Vue
|
||||
|
||||
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
|
||||
|
||||
const DemoGrid = {
|
||||
template: '#grid-template',
|
||||
props: {
|
||||
data: Array,
|
||||
columns: Array,
|
||||
filterKey: String
|
||||
},
|
||||
setup(props) {
|
||||
const state = reactive({
|
||||
sortKey: '',
|
||||
sortOrders: props.columns.reduce((o, key) => (o[key] = 1, o), {})
|
||||
})
|
||||
|
||||
const filteredData = computed(() => {
|
||||
let { data, filterKey } = props
|
||||
if (filterKey) {
|
||||
filterKey = filterKey.toLowerCase()
|
||||
data = data.filter(row => {
|
||||
return Object.keys(row).some(key => {
|
||||
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
|
||||
})
|
||||
})
|
||||
}
|
||||
const { sortKey } = state
|
||||
if (sortKey) {
|
||||
const order = state.sortOrders[sortKey]
|
||||
data = data.slice().sort((a, b) => {
|
||||
a = a[sortKey]
|
||||
b = b[sortKey]
|
||||
return (a === b ? 0 : a > b ? 1 : -1) * order
|
||||
})
|
||||
}
|
||||
return data
|
||||
})
|
||||
|
||||
function sortBy(key) {
|
||||
state.sortKey = key
|
||||
state.sortOrders[key] *= -1
|
||||
}
|
||||
|
||||
return {
|
||||
...state,
|
||||
filteredData,
|
||||
sortBy,
|
||||
capitalize
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- App template (in DOM) -->
|
||||
<div id="demo">
|
||||
<form id="search">
|
||||
Search <input name="query" v-model="searchQuery">
|
||||
</form>
|
||||
<demo-grid
|
||||
:data="gridData"
|
||||
:columns="gridColumns"
|
||||
:filter-key="searchQuery">
|
||||
</demo-grid>
|
||||
</div>
|
||||
<!-- App script -->
|
||||
<script>
|
||||
const App = {
|
||||
components: {
|
||||
DemoGrid
|
||||
},
|
||||
data: {
|
||||
searchQuery: '',
|
||||
gridColumns: ['name', 'power'],
|
||||
gridData: [
|
||||
{ name: 'Chuck Norris', power: Infinity },
|
||||
{ name: 'Bruce Lee', power: 9000 },
|
||||
{ name: 'Jackie Chan', power: 7000 },
|
||||
{ name: 'Jet Li', power: 8000 }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#demo')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
170
packages/vue/examples/composition/svg.html
Normal file
170
packages/vue/examples/composition/svg.html
Normal file
@ -0,0 +1,170 @@
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
<script>
|
||||
// math helper...
|
||||
function valueToPoint (value, index, total) {
|
||||
var x = 0
|
||||
var y = -value * 0.8
|
||||
var angle = Math.PI * 2 / total * index
|
||||
var cos = Math.cos(angle)
|
||||
var sin = Math.sin(angle)
|
||||
var tx = x * cos - y * sin + 100
|
||||
var ty = x * sin + y * cos + 100
|
||||
return {
|
||||
x: tx,
|
||||
y: ty
|
||||
}
|
||||
}
|
||||
|
||||
const AxisLabel = {
|
||||
template: '<text :x="point.x" :y="point.y">{{stat.label}}</text>',
|
||||
props: {
|
||||
stat: Object,
|
||||
index: Number,
|
||||
total: Number
|
||||
},
|
||||
setup(props) {
|
||||
return {
|
||||
point: Vue.computed(() => valueToPoint(
|
||||
+props.stat.value + 10,
|
||||
props.index,
|
||||
props.total
|
||||
))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- template for the polygraph component. -->
|
||||
<script type="text/x-template" id="polygraph-template">
|
||||
<g>
|
||||
<polygon :points="points"></polygon>
|
||||
<circle cx="100" cy="100" r="80"></circle>
|
||||
<axis-label
|
||||
v-for="(stat, index) in stats"
|
||||
:stat="stat"
|
||||
:index="index"
|
||||
:total="stats.length">
|
||||
</axis-label>
|
||||
</g>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const Polygraph = {
|
||||
props: ['stats'],
|
||||
template: '#polygraph-template',
|
||||
setup(props) {
|
||||
return {
|
||||
points: Vue.computed(() => {
|
||||
const total = props.stats.length
|
||||
return props.stats.map((stat, i) => {
|
||||
const point = valueToPoint(stat.value, i, total)
|
||||
return point.x + ',' + point.y
|
||||
}).join(' ')
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AxisLabel
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- demo root element -->
|
||||
<div id="demo">
|
||||
<!-- Use the polygraph component -->
|
||||
<svg width="200" height="200">
|
||||
<polygraph :stats="stats"></polygraph>
|
||||
</svg>
|
||||
<!-- controls -->
|
||||
<div v-for="stat in stats">
|
||||
<label>{{stat.label}}</label>
|
||||
<input type="range" v-model="stat.value" min="0" max="100">
|
||||
<span>{{stat.value}}</span>
|
||||
<button @click="remove(stat)" class="remove">X</button>
|
||||
</div>
|
||||
<form id="add">
|
||||
<input name="newlabel" v-model="newLabel">
|
||||
<button @click="add">Add a Stat</button>
|
||||
</form>
|
||||
<pre id="raw">{{ stats }}</pre>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const App = {
|
||||
components: {
|
||||
Polygraph
|
||||
},
|
||||
setup() {
|
||||
const newLabel = Vue.ref('')
|
||||
const stats = Vue.reactive([
|
||||
{ label: 'A', value: 100 },
|
||||
{ label: 'B', value: 100 },
|
||||
{ label: 'C', value: 100 },
|
||||
{ label: 'D', value: 100 },
|
||||
{ label: 'E', value: 100 },
|
||||
{ label: 'F', value: 100 }
|
||||
])
|
||||
|
||||
function add(e) {
|
||||
e.preventDefault()
|
||||
if (!newLabel.value) return
|
||||
stats.push({
|
||||
label: newLabel.value,
|
||||
value: 100
|
||||
})
|
||||
newLabel.value = ''
|
||||
}
|
||||
|
||||
function remove(stat) {
|
||||
if (stats.length > 3) {
|
||||
stats.splice(stats.indexOf(stat), 1)
|
||||
} else {
|
||||
alert('Can\'t delete more!')
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
newLabel,
|
||||
stats,
|
||||
add,
|
||||
remove
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#demo')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: Helvetica Neue, Arial, sans-serif;
|
||||
}
|
||||
|
||||
polygon {
|
||||
fill: #42b983;
|
||||
opacity: .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;
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +1,4 @@
|
||||
<script src="../dist/vue.global.js"></script>
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css">
|
||||
|
||||
<div id="app">
|
||||
Loading…
Reference in New Issue
Block a user