glib-web 0.10.9 → 0.11.0
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/component.vue
CHANGED
|
@@ -105,6 +105,7 @@ import ResponsivePanel from "./panels/responsive";
|
|
|
105
105
|
import UlPanel from "./panels/ul";
|
|
106
106
|
import WebPanel from "./panels/web";
|
|
107
107
|
import GridPanel from "./panels/grid";
|
|
108
|
+
import TimelinePanel from "./panels/timeline";
|
|
108
109
|
|
|
109
110
|
import MultimediaVideo from "./multimedia/video";
|
|
110
111
|
|
|
@@ -191,6 +192,7 @@ export default {
|
|
|
191
192
|
"panels-ul": UlPanel,
|
|
192
193
|
"panels-web": WebPanel,
|
|
193
194
|
"panels-grid": GridPanel,
|
|
195
|
+
"panels-timeline": TimelinePanel,
|
|
194
196
|
|
|
195
197
|
"multimedia-video": MultimediaVideo,
|
|
196
198
|
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<v-container :class="$classes()">
|
|
3
|
+
<v-timeline v-if="items" dense align-top>
|
|
4
|
+
<v-timeline-item
|
|
5
|
+
v-for="(item, item_key) in items"
|
|
6
|
+
:key="item_key"
|
|
7
|
+
color="white"
|
|
8
|
+
fill-dot
|
|
9
|
+
:small="$classes().includes('small')"
|
|
10
|
+
:large="$classes().includes('large')"
|
|
11
|
+
:class="timelineItemClasses(item)"
|
|
12
|
+
:hide-dot="item.hide_dot"
|
|
13
|
+
>
|
|
14
|
+
<template v-slot:icon>
|
|
15
|
+
<div
|
|
16
|
+
:class="$classes().includes('outlined') ? 'outlined-dots' : ''"
|
|
17
|
+
:style="`border-color: ${dotColor(item)};`"
|
|
18
|
+
>
|
|
19
|
+
<div v-if="item.left_label" class="number-circle">
|
|
20
|
+
{{ item.left_label }}
|
|
21
|
+
</div>
|
|
22
|
+
<v-icon v-else size="24" :color="dotColor(item)">{{
|
|
23
|
+
(item.active || item.completed
|
|
24
|
+
? item.activeIcon
|
|
25
|
+
: item.regularIcon) ||
|
|
26
|
+
(item.active || item.completed ? activeIcon : regularIcon)
|
|
27
|
+
}}</v-icon>
|
|
28
|
+
</div>
|
|
29
|
+
</template>
|
|
30
|
+
|
|
31
|
+
<div :class="item.subtitle ? 'mt-5' : 'mt-2'" class="content">
|
|
32
|
+
<div
|
|
33
|
+
:class="item.active ? 'font-weight-bold' : 'font-weight-regular'"
|
|
34
|
+
>
|
|
35
|
+
{{ item.label }}
|
|
36
|
+
</div>
|
|
37
|
+
<div class="font-weight-regular">
|
|
38
|
+
{{ item.subtitle }}
|
|
39
|
+
</div>
|
|
40
|
+
<panels-responsive v-if="item.active" :spec="spec" />
|
|
41
|
+
</div>
|
|
42
|
+
</v-timeline-item>
|
|
43
|
+
</v-timeline>
|
|
44
|
+
</v-container>
|
|
45
|
+
</template>
|
|
46
|
+
|
|
47
|
+
<script>
|
|
48
|
+
export default {
|
|
49
|
+
props: {
|
|
50
|
+
spec: { type: Object, required: true }
|
|
51
|
+
},
|
|
52
|
+
data() {
|
|
53
|
+
return {
|
|
54
|
+
items: this.spec.items,
|
|
55
|
+
activeIcon: this.spec.activeIcon || "check_circle",
|
|
56
|
+
regularIcon: this.spec.regularIcon || "radio_button_unchecked",
|
|
57
|
+
color: this.spec.color || "blue",
|
|
58
|
+
uncompletedColor: this.spec.uncompletedColor || "grey"
|
|
59
|
+
};
|
|
60
|
+
},
|
|
61
|
+
methods: {
|
|
62
|
+
timelineItemClasses(item) {
|
|
63
|
+
let classes = !item.completed && !item.active ? "uncompleted" : "";
|
|
64
|
+
|
|
65
|
+
if (!this.$classes().includes("small")) {
|
|
66
|
+
classes += " my-6";
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
return classes;
|
|
70
|
+
},
|
|
71
|
+
dotColor(item) {
|
|
72
|
+
return !item.completed && !item.active
|
|
73
|
+
? this.uncompletedColor
|
|
74
|
+
: item.color || this.color;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
</script>
|
|
79
|
+
|
|
80
|
+
<style lang="scss" scoped>
|
|
81
|
+
.v-timeline {
|
|
82
|
+
padding-top: 0px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.v-timeline-item {
|
|
86
|
+
padding-bottom: 0px !important;
|
|
87
|
+
}
|
|
88
|
+
.container {
|
|
89
|
+
padding-top: 0px;
|
|
90
|
+
}
|
|
91
|
+
.small {
|
|
92
|
+
> .number-circle {
|
|
93
|
+
font-size: 14px;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
.outlined-dots {
|
|
97
|
+
border-radius: 50%;
|
|
98
|
+
width: 100%;
|
|
99
|
+
height: 100%;
|
|
100
|
+
border: 1px solid;
|
|
101
|
+
margin: auto;
|
|
102
|
+
text-align: center;
|
|
103
|
+
font-weight: bold;
|
|
104
|
+
font-size: 22px;
|
|
105
|
+
}
|
|
106
|
+
.outlined .v-timeline-item {
|
|
107
|
+
::v-deep .v-timeline-item__dot {
|
|
108
|
+
box-shadow: none;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
</style>
|