Skip to content

Commit

Permalink
📝 add code sample to examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@posva
posva committed Mar 10, 2018
1 parent 842089a commit 0b5156c
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 31 deletions.
88 changes: 58 additions & 30 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VuePromised</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/siimple.min.css">
<title>VuePromised</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/siimple.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/themes/prism.css">

<style>
figure {
Expand All @@ -29,14 +30,19 @@
display: flex;
align-items: center;
}
[v-cloak] {
display: none;
}
</style>
</head>

<body>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-promised"></script>
<script src="https://unpkg.com/vue-promised/dist/vue-promised.min.js"></script>
<script src="https://unpkg.com/[email protected]/prism.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-prism-component.min.js"></script>

<div id="app">

Expand All @@ -51,53 +57,61 @@
</div>
</div>

<div class="siimple-content--medium">
<div class="siimple-box siimple-box--white">
<h2 class="siimple-h2 text-center">Single promise</h2>
<div class="siimple-content--medium" v-cloak>
<div class="siimple-box siimple-box--white text-center">
<h2 class="siimple-h2">Single promise</h2>

<div class="siimple-content--fluid text-center">
<div class="siimple-content--fluid">
<button class="siimple-btn siimple-btn--blue" @click="trySuccess">Fetch a new comic</button>
<button class="siimple-btn siimple-btn--red" @click="tryError">Purposely fail</button>
</div>

<div class="space"></div>

<Promised :promise="promise">
<div class="siimple-spinner siimple-spinner--teal"></div>
<figure class="text-center" slot-scope="data">
<img :alt="data.transcript" :src="data.img"/>
<figcaption>#{{ data.num }} - {{ data.title }}</figcaption>
</figure>
<div slot="catch" slot-scope="error" class="siimple-alert siimple-alert--orange">
Error: {{ error.message }}
</div>
</Promised>
<demo-code :code="samples.single">
<Promised :promise="promise">
<div class="siimple-spinner siimple-spinner--teal"></div>
<figure class="text-center" slot-scope="data">
<img :alt="data.transcript" :src="data.img"/>
<figcaption>#{{ data.num }} - {{ data.title }}</figcaption>
</figure>
<div slot="catch" slot-scope="error" class="siimple-alert siimple-alert--orange">
Error: {{ error.message }}
</div>
</Promised>
</demo-code>

</div>

<div class="siimple-box siimple-box--white text-center">
<h2 class="siimple-h2">Multiple promises</h2>

<a class="siimple-link siimple-small" target="_blank" href="https://github.com/posva/vue-promised/issues/4">psst, I need help to improve the API, see #4 to help</a>
<br/>

<button class="siimple-btn siimple-btn--blue" @click="tryMultipleSuccess">Add another image</button>
<button class="siimple-btn siimple-btn--red" @click="tryMultipleError">Fail one promise</button>
<button class="siimple-btn siimple-btn--navy" @click="resetMultiple">Reset promises</button>
<!-- <button class="siimple-btn siimple-btn-purple" @click="resetErrors">Reset errors</button> -->

<div class="space"></div>

<Promised :promises="promises" ref="multiplePromised">
<div class="siimple-spinner siimple-spinner--teal"></div>
<div slot-scope="items">
<h3>{{ items.length }} promises resolved</h3>
<figure v-for="item in items">
<img :alt="item.transcript" :src="item.img"/>
<figcaption>#{{ item.num }} - {{ item.title }}</figcaption>
</figure>
</div>
<div slot="catch" slot-scope="errors" class="siimple-tip siimple-tip--exclamation siimple-tip--red">
Failed {{ errors.length }} promises
</div>
</Promised>
<demo-code :code="samples.multiple">
<Promised :promises="promises" ref="multiplePromised">
<div class="siimple-spinner siimple-spinner--teal"></div>
<div slot-scope="items">
<h3>{{ items.length }} promises resolved</h3>
<figure v-for="item in items" :key="item.num">
<img :alt="item.transcript" :src="item.img"/>
<figcaption>#{{ item.num }} - {{ item.title }}</figcaption>
</figure>
</div>
<div slot="catch" slot-scope="errors" class="siimple-tip siimple-tip--exclamation siimple-tip--red">
Failed {{ errors.length }} promises
</div>
</Promised>
</demo-code>

</div>

<div class="siimple-footer" align="center">
Expand All @@ -107,6 +121,20 @@ <h3>{{ items.length }} promises resolved</h3>
</div>
</div>

<script type="text/x-template" id="demo-code">
<div>
<h5>
<a class="siimple-link" href="#" role="button" @click.prevent="showCode = !showCode">{{ seeLabel }}</a>
</h5>
<div class="demo__demo" v-if="!showCode">
<slot/>
</div>
<div class="demo__code" v-else>
<Prism language="html" :code="code"/>
</div>
</div>
</script>

<script src="index.js"></script>

</body>
Expand Down
53 changes: 52 additions & 1 deletion docs/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* global Vue, VuePromised, axios */
/* global Vue, VuePromised, axios, PrismComponent */
// eslint-disable-next-line
const delay = (t, value) => new Promise(r => setTimeout(r.bind(null, value), t))

Expand All @@ -11,13 +11,64 @@ function getRandomImage (max) {
.then(res => res.data)
}

Vue.component('DemoCode', {
template: '#demo-code',
props: {
code: String,
},

data () {
return {
showCode: false,
}
},

computed: {
seeLabel () {
return this.showCode ? 'See demo' : 'See code'
},
},

components: { Prism: PrismComponent },
})

// eslint-disable-next-line
new Vue({
el: '#app',

data: () => ({
promise: null,
promises: [],

samples: {
single: `\
<Promised :promise="promise">
<div class="loading-spinner"></div>
<figure slot-scope="data">
<img :alt="data.transcript" :src="data.img"/>
<figcaption>#{{ data.num }} - {{ data.title }}</figcaption>
</figure>
<div slot="catch" slot-scope="error" class="message--error">
Error: {{ error.message }}
</div>
</Promised>
`,
multiple: `\
<Promised :promises="promises">
<div class="loading-spinner"></div>
<div slot-scope="items">
<h3>{{ items.length }} promises resolved</h3>
<figure v-for="item in items">
<img :alt="item.transcript" :src="item.img"/>
<figcaption>#{{ item.num }} - {{ item.title }}</figcaption>
</figure>
</div>
<div slot="catch" slot-scope="errors" class="tip--error">
Failed {{ errors.length }} promises
</div>
</Promised>
`
},
}),

created () {
Expand Down

0 comments on commit 0b5156c

Please sign in to comment.