tijmen/vue3-pricing-tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add bubble example

Browse Source
This commit is contained in:
Tijmen van Nesselrooij
2023-10-13 22:12:09 +02:00
parent f1ff1a118a
commit 1f9d9ad3b5
2 changed files with 163 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/App.vue
View File

@@ -1,8 +1,124 @@
<script setup lang="ts"> <script setup lang="ts">
import Bubble from "./components/Bubble.vue";
import AutoCompleteDemo from "./components/AutoCompleteDemo.vue"; import AutoCompleteDemo from "./components/AutoCompleteDemo.vue";
</script> </script>
<template> <template>
<h1>Autocomplete Demo</h1> <h1>Autocomplete Demo</h1>
<AutoCompleteDemo /> <AutoCompleteDemo />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere, sem
vel faucibus luctus, ipsum justo rhoncus felis, non vestibulum orci magna ac
sapien. Aliquam porta felis sit amet urna hendrerit, a malesuada est
gravida. Duis lobortis turpis in erat varius, ornare mattis lacus porta.
Vivamus scelerisque est ante, nec mattis nulla commodo nec. Morbi pretium
bibendum lorem. Cras lacinia dolor eros, in pellentesque mi tempus vitae.
Morbi placerat est vitae arcu cursus, eget convallis mi finibus. Cras
lacinia sem ut felis dignissim, imperdiet lobortis ante fringilla. Sed quis
imperdiet velit. Suspendisse interdum ut quam vel luctus.
</p>
<p>
Maecenas et velit pharetra nibh mollis facilisis. Donec varius luctus
lobortis. Morbi vel quam eu nibh viverra dapibus. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. In luctus
venenatis odio, ac sollicitudin quam vulputate et. Fusce sit amet fringilla
turpis. In et gravida ligula. Maecenas at maximus neque, gravida ultricies
quam. Nam ac tortor ut enim tincidunt pharetra. Ut fringilla vulputate
gravida. Sed scelerisque blandit eros, vel interdum lectus vestibulum eget.
Integer ac diam lorem. Pellentesque elementum ante sed molestie dictum. Sed
eleifend erat vel pulvinar efficitur.
</p>
<p>
Cras ornare urna lectus, et finibus odio blandit non. Curabitur scelerisque
suscipit lacinia. Sed sed hendrerit velit. Pellentesque eu est eget turpis
sodales auctor. Praesent pharetra venenatis diam, sit amet cursus mauris
tristique nec. In mattis imperdiet sapien quis blandit. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Morbi nec neque ullamcorper, feugiat felis vitae, vehicula ligula.
</p>
<p>
Vivamus vehicula quis neque at aliquet. Pellentesque sollicitudin vehicula
condimentum. Duis maximus malesuada lacus sed dignissim. Nullam non urna ac
felis congue porttitor quis vel metus. Nunc quis dui nec tortor egestas
mollis. Aliquam tincidunt nulla in urna pharetra gravida. Phasellus lorem
quam, aliquam at maximus pharetra, aliquam at sem. Nam nulla lacus, viverra
et tincidunt in, commodo nec nisi. Phasellus nisl leo, mattis id luctus a,
malesuada id lacus. Vivamus vel nulla eget tellus posuere luctus in in
augue. Integer massa nibh, egestas sit amet elementum ac, luctus quis
lectus. Nulla nulla justo, maximus sed purus in, dapibus finibus purus.
Aliquam eget purus efficitur, rhoncus risus vel, placerat orci.
</p>
<p>
Ut elementum, massa
<Bubble>
<template #default> nonaaaaa </template>
<template #Message>
nonaaaaanonaaaaanonaaaaanonaaaaanonaaaaanonaaaaanonaaaaa <br />
nonaaaaanonaaaaanonaaaaanonaaaaanonaaaaanonaaaaa
</template>
</Bubble>
venenatis molestie, purus nisl semper ligula, eu semper orci nibh sit amet
mi. Sed ut felis lacus. Maecenas finibus elit id hendrerit rutrum. Maecenas
porttitor tincidunt fermentum. Praesent convallis nibh sed elit laoreet,
quis faucibus ante lacinia. Suspendisse posuere aliquet ullamcorper. Quisque
malesuada magna sodales, mattis lacus eget, scelerisque sem. Donec eleifend
fringilla mi sit amet vehicula. In placerat id turpis at lacinia. Sed quis
interdum augue. Aenean volutpat, nisl vel tristique posuere, risus velit
faucibus arcu, id finibus velit magna eu nisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere, sem
vel faucibus luctus, ipsum justo rhoncus felis, non vestibulum orci magna ac
sapien. Aliquam porta felis sit amet urna hendrerit, a malesuada est
gravida. Duis lobortis turpis in erat varius, ornare mattis lacus porta.
Vivamus scelerisque est ante, nec mattis nulla commodo nec. Morbi pretium
bibendum lorem. Cras lacinia dolor eros, in pellentesque mi tempus vitae.
Morbi placerat est vitae arcu cursus, eget convallis mi finibus. Cras
lacinia sem ut felis dignissim, imperdiet lobortis ante fringilla. Sed quis
imperdiet velit. Suspendisse interdum ut quam vel luctus.
</p>
<p>
Maecenas et velit pharetra nibh mollis facilisis. Donec varius luctus
lobortis. Morbi vel quam eu nibh viverra dapibus. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. In luctus
venenatis odio, ac sollicitudin quam vulputate et. Fusce sit amet fringilla
turpis. In et gravida ligula. Maecenas at maximus neque, gravida ultricies
quam. Nam ac tortor ut enim tincidunt pharetra. Ut fringilla vulputate
gravida. Sed scelerisque blandit eros, vel interdum lectus vestibulum eget.
Integer ac diam lorem. Pellentesque elementum ante sed molestie dictum. Sed
eleifend erat vel pulvinar efficitur.
</p>
<p>
Cras ornare urna lectus, et finibus odio blandit non. Curabitur scelerisque
suscipit lacinia. Sed sed hendrerit velit. Pellentesque eu est eget turpis
sodales auctor. Praesent pharetra venenatis diam, sit amet cursus mauris
tristique nec. In mattis imperdiet sapien quis blandit. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Morbi nec neque ullamcorper, feugiat felis vitae, vehicula ligula.
</p>
<p>
Vivamus vehicula quis neque at aliquet. Pellentesque sollicitudin vehicula
condimentum. Duis maximus malesuada lacus sed dignissim. Nullam non urna ac
felis congue porttitor quis vel metus. Nunc quis dui nec tortor egestas
mollis. Aliquam tincidunt nulla in urna pharetra gravida. Phasellus lorem
quam, aliquam at maximus pharetra, aliquam at sem. Nam nulla lacus, viverra
et tincidunt in, commodo nec nisi. Phasellus nisl leo, mattis id luctus a,
malesuada id lacus. Vivamus vel nulla eget tellus posuere luctus in in
augue. Integer massa nibh, egestas sit amet elementum ac, luctus quis
lectus. Nulla nulla justo, maximus sed purus in, dapibus finibus purus.
Aliquam eget purus efficitur, rhoncus risus vel, placerat orci.
</p>
<p>
Ut elementum, massa non venenatis molestie, purus nisl semper ligula, eu
semper orci nibh sit amet mi. Sed ut felis lacus. Maecenas finibus elit id
hendrerit rutrum. Maecenas porttitor tincidunt fermentum. Praesent convallis
nibh sed elit laoreet, quis faucibus ante lacinia. Suspendisse posuere
aliquet ullamcorper. Quisque malesuada magna sodales, mattis lacus eget,
scelerisque sem. Donec eleifend fringilla mi sit amet vehicula. In placerat
id turpis at lacinia. Sed quis interdum augue. Aenean volutpat, nisl vel
tristique posuere, risus velit faucibus arcu, id finibus velit magna eu
nisi.
</p>
</template> </template>

47
src/components/Bubble.vue Normal file
View File

@@ -0,0 +1,47 @@
<script setup lang="ts">
const props = defineProps<{
message?: string;
}>();
</script>
<template>
<span class="bubble-anchor">
<span>
<slot></slot>
</span>
<span class="bubble">
<slot v-if="!props.message" name="Message"></slot>
{{ props.message }}
</span>
</span>
</template>
<style scoped>
.bubble-anchor {
position: relative;
}
.bubble {
position: absolute;
white-space: nowrap;
bottom: 30px;
left: 50%;
transform: translate(-50%, 0%);
background: #00aabb;
border-radius: 0.4em;
padding-left: 5px;
padding-right: 5px;
}
.bubble:after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
border: 15px solid transparent;
border-top-color: #00aabb;
border-bottom: 0;
border-left: 0;
}
</style>