@cloudron/pankow 3.2.4 → 3.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/MenuItem.vue +1 -1
- package/components/ProgressBar.vue +30 -3
- package/gallery/Index.vue +2 -0
- package/package.json +5 -5
package/components/MenuItem.vue
CHANGED
|
@@ -54,7 +54,7 @@ function onActivated() {
|
|
|
54
54
|
display: flex;
|
|
55
55
|
align-items: center;
|
|
56
56
|
user-select: none;
|
|
57
|
-
padding:
|
|
57
|
+
padding: 8px 10px;
|
|
58
58
|
cursor: pointer;
|
|
59
59
|
font-size: 14px; /* this also defines the overall widget size as all sizes are in rem */
|
|
60
60
|
font-family: var(--font-family);
|
|
@@ -15,6 +15,10 @@ const props = defineProps({
|
|
|
15
15
|
type: Boolean,
|
|
16
16
|
default: false,
|
|
17
17
|
},
|
|
18
|
+
busy: {
|
|
19
|
+
type: Boolean,
|
|
20
|
+
default: false,
|
|
21
|
+
},
|
|
18
22
|
mode: String // only really "indeterminate" is supported
|
|
19
23
|
});
|
|
20
24
|
|
|
@@ -29,7 +33,9 @@ const normalizedValue = computed(() => {
|
|
|
29
33
|
<template>
|
|
30
34
|
<div class="pankow-progress-bar">
|
|
31
35
|
<div class="pankow-progress-bar-label" v-show="showLabel"><slot>{{ value + ' %' }}</slot></div>
|
|
32
|
-
<div v-if="mode !== 'indeterminate'" class="pankow-progress-bar-filled" :style="{ width: normalizedValue+'%', height: slim ? '2px' : '6px' }"
|
|
36
|
+
<div v-if="mode !== 'indeterminate'" class="pankow-progress-bar-filled" :style="{ width: normalizedValue+'%', height: slim ? '2px' : '6px' }">
|
|
37
|
+
<div v-if="busy" class="pankow-progress-bar-glow" :style="{ height: slim ? '2px' : '6px' }"></div>
|
|
38
|
+
</div>
|
|
33
39
|
<div v-else class="pankow-progress-bar-indeterminate" :style="{ height: slim ? '2px' : '6px' }"></div>
|
|
34
40
|
</div>
|
|
35
41
|
</template>
|
|
@@ -37,8 +43,8 @@ const normalizedValue = computed(() => {
|
|
|
37
43
|
<style>
|
|
38
44
|
|
|
39
45
|
.pankow-progress-bar {
|
|
46
|
+
position: relative;
|
|
40
47
|
font-weight: 700;
|
|
41
|
-
min-height: 12px;
|
|
42
48
|
user-select: none;
|
|
43
49
|
border-radius: var(--pankow-border-radius);
|
|
44
50
|
display: block;
|
|
@@ -49,6 +55,7 @@ const normalizedValue = computed(() => {
|
|
|
49
55
|
}
|
|
50
56
|
|
|
51
57
|
.pankow-progress-bar-filled {
|
|
58
|
+
position: relative;
|
|
52
59
|
background-color: var(--pankow-color-primary);
|
|
53
60
|
transition: width 250ms;
|
|
54
61
|
white-space: nowrap;
|
|
@@ -56,6 +63,26 @@ const normalizedValue = computed(() => {
|
|
|
56
63
|
height: 6px;
|
|
57
64
|
}
|
|
58
65
|
|
|
66
|
+
.pankow-progress-bar-glow {
|
|
67
|
+
width: 100%;
|
|
68
|
+
height: 6px;
|
|
69
|
+
display: inline-block;
|
|
70
|
+
position: absolute;
|
|
71
|
+
overflow: hidden;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.pankow-progress-bar-glow::after {
|
|
75
|
+
content: '';
|
|
76
|
+
width: max(100px, 30%);
|
|
77
|
+
height: 100%;
|
|
78
|
+
background: linear-gradient(to right, transparent, rgba(255,255,255,0.7), transparent 90%);
|
|
79
|
+
position: absolute;
|
|
80
|
+
top: 0;
|
|
81
|
+
left: 0;
|
|
82
|
+
box-sizing: border-box;
|
|
83
|
+
animation: pankow-progress-bar-indeterminate-animation 1.5s ease-in-out infinite;
|
|
84
|
+
}
|
|
85
|
+
|
|
59
86
|
.pankow-progress-bar-indeterminate {
|
|
60
87
|
width: 100%;
|
|
61
88
|
height: 6px;
|
|
@@ -70,7 +97,7 @@ const normalizedValue = computed(() => {
|
|
|
70
97
|
content: '';
|
|
71
98
|
width: 90%;
|
|
72
99
|
height: 100%;
|
|
73
|
-
background: var(--pankow-color-primary);
|
|
100
|
+
background: linear-gradient(to right, transparent, var(--pankow-color-primary));
|
|
74
101
|
position: absolute;
|
|
75
102
|
top: 0;
|
|
76
103
|
left: 0;
|
package/gallery/Index.vue
CHANGED
|
@@ -656,6 +656,8 @@ onMounted(async () => {
|
|
|
656
656
|
<br/><br/>
|
|
657
657
|
<ProgressBar :value="progressValue" />
|
|
658
658
|
<br/>
|
|
659
|
+
<ProgressBar :value="progressValue" :busy="true" />
|
|
660
|
+
<br/>
|
|
659
661
|
<ProgressBar :value="progressValue">Custom label with {{ progressValue }}</ProgressBar>
|
|
660
662
|
<br/>
|
|
661
663
|
<ProgressBar mode="indeterminate" :show-label="false"/>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloudron/pankow",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "3.2.
|
|
4
|
+
"version": "3.2.6",
|
|
5
5
|
"description": "",
|
|
6
6
|
"main": "index.js",
|
|
7
7
|
"scripts": {
|
|
@@ -13,13 +13,13 @@
|
|
|
13
13
|
"license": "ISC",
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fontsource/inter": "^5.2.6",
|
|
16
|
-
"@fortawesome/fontawesome-free": "^
|
|
16
|
+
"@fortawesome/fontawesome-free": "^7.0.0",
|
|
17
17
|
"filesize": "^11.0.2",
|
|
18
18
|
"monaco-editor": "^0.52.2"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@vitejs/plugin-vue": "^6.0.
|
|
22
|
-
"vite": "^7.0.
|
|
23
|
-
"vue": "^3.5.
|
|
21
|
+
"@vitejs/plugin-vue": "^6.0.1",
|
|
22
|
+
"vite": "^7.0.6",
|
|
23
|
+
"vue": "^3.5.18"
|
|
24
24
|
}
|
|
25
25
|
}
|