Skip to content

Commit 9fc49cd

Browse files
author
Guillaume Chau
committed
Demo update
1 parent 5f19172 commit 9fc49cd

File tree

5 files changed

+226
-9
lines changed

5 files changed

+226
-9
lines changed

‎demo-src/src/App.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -278,6 +278,7 @@ label input {
278278
padding: 24px;
279279
border-radius: 5px;
280280
box-shadow: 0 5px 30px rgba(black, .1);
281+
max-width: 250px;
281282
}
282283
283284
.tooltip-arrow {
@@ -300,6 +301,21 @@ label input {
300301
border-color: $color;
301302
}
302303
}
304+
305+
&.tooltip-loading {
306+
.tooltip-inner {
307+
color: #77aaff;
308+
}
309+
}
310+
}
311+
312+
.v-popover {
313+
&.inline {
314+
display: inline-block;
315+
&:not(:last-child) {
316+
margin-right: 12px;
317+
}
318+
}
303319
}
304320
305321
.command {
@@ -370,6 +386,12 @@ label input {
370386
&.b3 {
371387
transform: rotate(-5deg);
372388
}
389+
390+
&.popover-btn {
391+
background: #333;
392+
color: #eee;
393+
border-color: #999;
394+
}
373395
}
374396
}
375397

‎demo-src/src/PageHome.vue‎

Lines changed: 185 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,19 @@
4040
<section class="demo">
4141
<div class="section-content">
4242
<h2>Customize it!</h2>
43+
44+
<div class="form">
45+
<select v-model="placement">
46+
<option value="bottom-center">bottom</option>
47+
<option value="top-center">top</option>
48+
<option value="left-center">left</option>
49+
<option value="right-center">right</option>
50+
</select>
51+
</div>
52+
4353
<button class="tooltip-target b2" v-tooltip="{
4454
content: 'You can change a lot of parameters: placement, classes, offset, delay...',
45-
placement: 'bottom-center',
55+
placement,
4656
classes: ['info'],
4757
targetClasses: ['it-has-a-tooltip'],
4858
offset: 100,
@@ -64,6 +74,30 @@
6474
</Collapse>
6575
</section>
6676

77+
<section class="demo">
78+
<div class="section-content">
79+
<h2>Async content</h2>
80+
81+
<button
82+
class="tooltip-target"
83+
v-tooltip="{
84+
content: asyncContent,
85+
loadingContent: '<i>Loading...</i>',
86+
}"
87+
>Hover me</button>
88+
</div>
89+
</section>
90+
91+
<section class="snippets">
92+
<Collapse title="Show code">
93+
<div class="section-content">
94+
<CodeSnippet class="snippet" :code="componentSnippet6" lang="html"/>
95+
<div class="plus">+</div>
96+
<CodeSnippet class="snippet" :code="styleSnippet6" lang="scss"/>
97+
</div>
98+
</Collapse>
99+
</section>
100+
67101
<section class="demo">
68102
<div class="section-content">
69103
<h2>Manual mode</h2>
@@ -105,13 +139,24 @@
105139

106140
<div class="form">
107141
<label><input type="checkbox" name="enabled" v-model="isEnabled" /> Enable</label>
142+
143+
<label><input type="checkbox" name="auto-hide" v-model="isAutoHiding" /> AutoHide</label>
144+
145+
<select v-model="placement">
146+
<option value="bottom-center">bottom</option>
147+
<option value="top-center">top</option>
148+
<option value="left-center">left</option>
149+
<option value="right-center">right</option>
150+
</select>
108151
</div>
109152

110153
<v-popover
111154
offset="16"
155+
:placement="placement"
156+
:auto-hide="isAutoHiding"
112157
:disabled="!isEnabled"
113158
>
114-
<button class="tooltip-target b3">Click me</button>
159+
<button class="tooltip-target b3 popover-btn">Click me</button>
115160

116161
<template slot="popover">
117162
<input class="tooltip-content" v-model="msg" placeholder="Tooltip content" />
@@ -142,6 +187,81 @@
142187
</Collapse>
143188
</section>
144189

190+
<section class="demo">
191+
<div class="section-content">
192+
<h2>Open group</h2>
193+
194+
<div class="form">
195+
<a
196+
v-close-popover.all
197+
class="btn"
198+
>Close All</a>
199+
</div>
200+
201+
<v-popover
202+
class="inline"
203+
:placement="placement"
204+
:auto-hide="false"
205+
open-group="group1"
206+
>
207+
<button class="tooltip-target b1 popover-btn">Group 1</button>
208+
209+
<template slot="popover">
210+
<div class="close">
211+
<a
212+
v-close-popover
213+
class="btn"
214+
>Close</a>
215+
</div>
216+
</template>
217+
</v-popover>
218+
219+
<v-popover
220+
class="inline"
221+
:placement="placement"
222+
:auto-hide="false"
223+
open-group="group1"
224+
>
225+
<button class="tooltip-target b2 popover-btn">Group 1</button>
226+
227+
<template slot="popover">
228+
<div class="close">
229+
<a
230+
v-close-popover
231+
class="btn"
232+
>Close</a>
233+
</div>
234+
</template>
235+
</v-popover>
236+
237+
<v-popover
238+
class="inline"
239+
:placement="placement"
240+
:auto-hide="false"
241+
open-group="group2"
242+
>
243+
<button class="tooltip-target b3 popover-btn">Group 2</button>
244+
245+
<template slot="popover">
246+
<div class="close">
247+
<a
248+
v-close-popover
249+
class="btn"
250+
>Close</a>
251+
</div>
252+
</template>
253+
</v-popover>
254+
</div>
255+
</section>
256+
257+
<section class="snippets">
258+
<Collapse title="Show code">
259+
<div class="section-content">
260+
<CodeSnippet class="snippet" :code="componentSnippet7" lang="html"/>
261+
</div>
262+
</Collapse>
263+
</section>
264+
145265
<section class="demo">
146266
<div class="section-content">
147267
<h2>Manual mode</h2>
@@ -162,7 +282,7 @@
162282
offset="16"
163283
:auto-hide="false"
164284
>
165-
<button class="tooltip-target b1">Target</button>
285+
<button class="tooltip-target b1 popover-btn">Target</button>
166286

167287
<template slot="popover">
168288
<input class="tooltip-content" v-model="msg" placeholder="Tooltip content" />
@@ -332,6 +452,7 @@ const styleSnippet2 = `
332452
padding: 24px;
333453
border-radius: 5px;
334454
box-shadow: 0 5px 30px rgba(black, .1);
455+
max-width: 250px;
335456
}
336457
337458
.tooltip-arrow {
@@ -424,7 +545,6 @@ const componentSnippet5 = `
424545
</div>
425546
426547
<button
427-
class="tooltip-target"
428548
v-tooltip="{
429549
content: msg,
430550
show: isOpen,
@@ -435,6 +555,54 @@ const componentSnippet5 = `
435555
</template>
436556
`
437557
558+
const componentSnippet6 = `
559+
<button
560+
v-tooltip="{
561+
content: asyncContent,
562+
loadingContent: '<i>Loading...</i>',
563+
}"
564+
>Hover me</button>
565+
`
566+
567+
const styleSnippet6 = `
568+
.tooltip {
569+
// ...
570+
571+
&.tooltip-loading {
572+
.tooltip-inner {
573+
color: #77aaff;
574+
}
575+
}
576+
}
577+
`
578+
579+
const componentSnippet7 = `
580+
<a
581+
v-close-popover.all
582+
>Close All</a>
583+
584+
<v-popover
585+
:auto-hide="false"
586+
open-group="group1"
587+
>
588+
<!-- ... -->
589+
</v-popover>
590+
591+
<v-popover
592+
:auto-hide="false"
593+
open-group="group1"
594+
>
595+
<!-- ... -->
596+
</v-popover>
597+
598+
<v-popover
599+
:auto-hide="false"
600+
open-group="group2"
601+
>
602+
<!-- ... -->
603+
</v-popover>
604+
`
605+
438606
export default {
439607
name: 'Home',
440608
@@ -447,6 +615,8 @@ export default {
447615
data () {
448616
return {
449617
msg: `This is a button.`,
618+
placement: 'bottom-center',
619+
isAutoHiding: false,
450620
isEnabled: true,
451621
isVisible: true,
452622
isOpen: false,
@@ -459,6 +629,9 @@ export default {
459629
styleSnippet3,
460630
componentSnippet4,
461631
componentSnippet5,
632+
componentSnippet6,
633+
styleSnippet6,
634+
componentSnippet7,
462635
}
463636
},
464637
@@ -468,6 +641,14 @@ export default {
468641
screenfull.toggle(document.documentElement)
469642
}
470643
},
644+
645+
asyncContent () {
646+
return new Promise((resolve, reject) => {
647+
setTimeout(() => {
648+
resolve(`Hi, I'm some content from a server! :)`)
649+
}, 2000)
650+
})
651+
},
471652
},
472653
}
473654
</script>

‎demo-src/src/main.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Vue from 'vue'
22
import VueRouter from 'vue-router'
3-
import VTooltip from '../../'
3+
import VTooltip, { createTooltip, destroyTooltip} from '../../'
44
import App from './App.vue'
55
import PageHome from './PageHome.vue'
66
import PageInstall from './PageInstall.vue'
@@ -32,3 +32,17 @@ new Vue({
3232
router,
3333
render: h => h(App),
3434
})
35+
36+
// Create tooltips without the directive
37+
window.manualTooltip = () => {
38+
const el = document.querySelector('button')
39+
const tooltip = createTooltip(el, {
40+
content: 'This is a manual tooltip',
41+
placement: 'bottom',
42+
trigger: 'manual',
43+
})
44+
tooltip.show()
45+
setTimeout(() => {
46+
destroyTooltip(el)
47+
}, 2000)
48+
}

‎docs/build.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/build.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)