Skip to content

Commit c547483

Browse files
m-mohrm-mohr
committed
Add BButton component as base for AsyncButton, 2.18.2
1 parent 9855edc commit c547483

File tree

7 files changed

+188
-6
lines changed

7 files changed

+188
-6
lines changed

‎CHANGELOG.md

+11-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
## [2.18.2] - 2025-01-15
11+
12+
### Added
13+
14+
- Internal `BButton` component as base for `AsyncButton`
15+
1016
## [2.18.1] - 2025-01-05
1117

1218
### Added
@@ -692,7 +698,11 @@ First stable release.
692698
Please see the [Releases](https://github.com/Open-EO/openeo-vue-components/releases) for changelogs prior to v1.0.0.
693699

694700

695-
[Unreleased]: https://github.com/Open-EO/openeo-vue-components/compare/v2.16.0...HEAD
701+
[Unreleased]: https://github.com/Open-EO/openeo-vue-components/compare/v2.18.2...HEAD
702+
[2.18.2]: https://github.com/Open-EO/openeo-vue-components/compare/v2.18.1...v2.18.2
703+
[2.18.1]: https://github.com/Open-EO/openeo-vue-components/compare/v2.18.0...v2.18.1
704+
[2.18.0]: https://github.com/Open-EO/openeo-vue-components/compare/v2.17.1...v2.18.0
705+
[2.17.0]: https://github.com/Open-EO/openeo-vue-components/compare/v2.16.0...v2.17.0
696706
[2.16.0]: https://github.com/Open-EO/openeo-vue-components/compare/v2.15.1...v2.16.0
697707
[2.15.1]: https://github.com/Open-EO/openeo-vue-components/compare/v2.15.0...v2.15.1
698708
[2.15.0]: https://github.com/Open-EO/openeo-vue-components/compare/v2.14.1...v2.15.0

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
A set of [Vue](https://vuejs.org) components for [openEO](http://openeo.org).
44

5-
This library's version is [**2.18.1**](CHANGELOG.md) and supports **openEO API versions 1.x.x**.
5+
This library's version is [**2.18.2**](CHANGELOG.md) and supports **openEO API versions 1.x.x**.
66
Legacy versions supporting API version 0.x are available as [releases](https://github.com/Open-EO/openeo-vue-components/releases).
77

88
npm: [@openeo/vue-components](https://www.npmjs.com/package/@openeo/vue-components)

‎components/internal/AsyncButton.vue

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<button type="button" v-show="fn" :title="title" :disabled="disabled" class="async-button" :class="{awesome: fa}" @click="update">
2+
<BButton type="button" v-show="fn" :title="title" :disabled="disabled" class="async-button" :class="{awesome: fa}" @click="update">
33
<span class="button-content">
44
<span v-if="loading" class="icon loading">
55
<i v-if="fa" :class="loadingClasses"></i>
@@ -20,13 +20,17 @@
2020
</span>
2121
<span class="text"><slot></slot></span>
2222
</span>
23-
</button>
23+
</BButton>
2424
</template>
2525

2626
<script>
2727
import LoadingIcon from './LoadingIcon.vue';
28+
import BButton from './BButton.vue';
2829
export default {
29-
components: { LoadingIcon },
30+
components: {
31+
BButton,
32+
LoadingIcon
33+
},
3034
name: "AsyncButton",
3135
props: {
3236
fn: {
@@ -64,6 +68,11 @@ export default {
6468
// Whether the button should show the same icon for the loading animation
6569
type: Boolean,
6670
default: false
71+
},
72+
nativeTooltip: {
73+
// Whether to use the native browser tooltip
74+
type: Boolean,
75+
default: false
6776
}
6877
},
6978
data() {

‎components/internal/BButton.vue

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<template>
2+
<button ref="button" type="button" :title="nativeTitle" :disabled="disabled" :name="name" :value="value"
3+
@click="click" @mouseover="mouseover" @mouseleave="mouseleave" @focus="focus" @blur="blur">
4+
<slot>{{ text }}</slot>
5+
</button>
6+
</template>
7+
8+
<script>
9+
export default {
10+
name: "BButton",
11+
props: {
12+
type: {
13+
type: String,
14+
default: 'button'
15+
},
16+
text: {
17+
type: String,
18+
default: ""
19+
},
20+
title: {
21+
type: String,
22+
default: null
23+
},
24+
disabled: {
25+
type: Boolean,
26+
default: false
27+
},
28+
name: {
29+
type: String,
30+
default: null
31+
},
32+
value: {
33+
type: String,
34+
default: null
35+
},
36+
nativeTooltip: {
37+
// Whether to use the native browser tooltip
38+
type: Boolean,
39+
default: false
40+
}
41+
},
42+
data() {
43+
return {
44+
showTooltip: false,
45+
nativeTooltip_: this.nativeTooltip,
46+
element: null,
47+
container: null
48+
};
49+
},
50+
mounted() {
51+
this.container = document.getElementsByName('body')[0];
52+
if (!this.container) {
53+
this.container = this.$refs.button.parentNode;
54+
if (!this.container) {
55+
this.nativeTooltip_ = true;
56+
}
57+
}
58+
},
59+
beforeDestroy() {
60+
this.removeTooltip();
61+
},
62+
computed: {
63+
nativeTitle() {
64+
return this.nativeTooltip_ ? this.title : null;
65+
}
66+
},
67+
watch: {
68+
nativeTooltip(newValue) {
69+
this.nativeTooltip_ = newValue;
70+
},
71+
showTooltip(newValue) {
72+
if (this.nativeTooltip_) {
73+
return;
74+
}
75+
if (newValue) {
76+
this.createTooltip();
77+
}
78+
else {
79+
this.removeTooltip();
80+
}
81+
}
82+
},
83+
methods: {
84+
createTooltip() {
85+
if (!this.container) {
86+
return;
87+
}
88+
if (this.element) {
89+
this.removeTooltip();
90+
}
91+
this.element = document.createElement('div');
92+
this.element.className = 'openeo-vue-tooltip';
93+
this.element.innerText = this.title;
94+
this.container.appendChild(this.element);
95+
this.updateTooltip();
96+
},
97+
updateTooltip() {
98+
if (!this.element) {
99+
return;
100+
}
101+
const el = this.$refs.button;
102+
const pos = el.getBoundingClientRect();
103+
this.element.style.top = Math.max(0, (pos.top + el.offsetHeight)) + 1 + 'px';
104+
this.element.style.left = Math.max(0, (pos.left + (el.offsetWidth / 2) - (this.element.offsetWidth / 2))) + 1 + 'px';
105+
},
106+
removeTooltip() {
107+
if (!this.container || !this.element) {
108+
return;
109+
}
110+
document.removeEventListener('scroll', this.removeTooltip);
111+
if (this.container.contains(this.element)) {
112+
this.container.removeChild(this.element);
113+
}
114+
},
115+
click(event) {
116+
this.$emit('click', event);
117+
},
118+
mousemove(event) {
119+
this.updateTooltip();
120+
this.$emit('mousemove', event);
121+
},
122+
mouseover(event) {
123+
this.showTooltip = true;
124+
this.$emit('mouseover', event);
125+
},
126+
mouseleave(event) {
127+
this.showTooltip = false;
128+
this.$emit('mouseleave', event);
129+
},
130+
focus(event) {
131+
this.showTooltip = true;
132+
this.$emit('focus', event);
133+
},
134+
blur(event) {
135+
this.showTooltip = false;
136+
this.$emit('blur', event);
137+
}
138+
}
139+
}
140+
</script>
141+
142+
<style lang="scss">
143+
.openeo-vue-tooltip {
144+
display: inline-block;
145+
position: absolute;
146+
background-color: #333;
147+
color: white;
148+
padding: 5px;
149+
border-radius: 5px;
150+
z-index: 1000;
151+
font-size: 0.9em;
152+
border: 1px solid #000;
153+
text-align: center;
154+
}
155+
</style>

‎dev/Examples.vue

+2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
<script>
2323
import EXAMPLES from './examples';
2424
25+
import BButton from '../components/internal/BButton.vue';
2526
import BillingPlans from '../components/BillingPlans.vue';
2627
import Capabilities from '../components/Capabilities.vue';
2728
import Collection from '../components/Collection.vue';
@@ -57,6 +58,7 @@ import UdfRuntimes from '../components/UdfRuntimes.vue';
5758
export default {
5859
name: 'Examples',
5960
components: {
61+
BButton,
6062
BillingPlans,
6163
Capabilities,
6264
Collection,

‎dev/examples.js

+6
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@ let asyncFn = () => new Promise(resolve => setTimeout(() => {
3030
}, 3000))
3131

3232
module.exports = {
33+
"b-button": {
34+
"example": {
35+
"title": "This is a test tooltip!",
36+
"text": "i"
37+
}
38+
},
3339
"billing-plans": {
3440
"api": {
3541
"billing": capabilities.billing

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@openeo/vue-components",
3-
"version": "2.18.1",
3+
"version": "2.18.2",
44
"author": "openEO Consortium",
55
"contributors": [
66
{

0 commit comments

Comments
 (0)