@ulu/frontend-vue 0.1.1-beta.1 → 0.1.1-beta.3
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/dist/{breakpoints-DM-CBTtb.js → breakpoints-BveV_33Q.js} +1 -1
- package/dist/frontend-vue.js +1 -1
- package/dist/{index-BNRZ3Apw.js → index-19R4u5is.js} +1766 -1653
- package/lib/components/systems/facets/useFacets.js +157 -38
- package/lib/components/visualizations/UluProgressBar.vue +57 -14
- package/lib/components/visualizations/UluProgressCircle.vue +124 -111
- package/package.json +3 -3
- package/types/components/systems/facets/useFacets.d.ts +2 -0
- package/types/components/systems/facets/useFacets.d.ts.map +1 -1
- package/lib/components/visualizations/progress-bar-examples.html +0 -175
|
@@ -1,175 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<h2 class="h2">Basic Example</h2>
|
|
3
|
-
<p>The default progress bar has no modifiers.</p>
|
|
4
|
-
<div class="progress-bar">
|
|
5
|
-
<div class="progress-bar__header"><strong class="progress-bar__label">Label that is long test</strong>
|
|
6
|
-
</div>
|
|
7
|
-
<div class="progress-bar__track">
|
|
8
|
-
<div class="progress-bar__bar" style="width: 40%;"></div>
|
|
9
|
-
</div>
|
|
10
|
-
<div class="progress-bar__values">
|
|
11
|
-
<div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
|
|
12
|
-
200</div>
|
|
13
|
-
<div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
|
|
14
|
-
</div>
|
|
15
|
-
</div>
|
|
16
|
-
</div>
|
|
17
|
-
|
|
18
|
-
<div class="rule rule--light"></div>
|
|
19
|
-
|
|
20
|
-
<h2 class="h2">Indeterminate Modifier</h2>
|
|
21
|
-
<p>Uses the <code>.progress-bar--indeterminate</code> modifier for an animated loading state when the progress is unknown.</p>
|
|
22
|
-
<div class="progress-bar progress-bar--loader progress-bar--indeterminate">
|
|
23
|
-
<div class="progress-bar__track">
|
|
24
|
-
<div class="progress-bar__bar"></div>
|
|
25
|
-
</div>
|
|
26
|
-
</div>
|
|
27
|
-
|
|
28
|
-
<div class="rule rule--light"></div>
|
|
29
|
-
|
|
30
|
-
<h2 class="h2">Loader Style</h2>
|
|
31
|
-
<p>Uses the <code>.progress-bar--loader</code> modifier for a thin loading bar.</p>
|
|
32
|
-
<div class="progress-bar progress-bar--loader">
|
|
33
|
-
<div class="progress-bar__track">
|
|
34
|
-
<div class="progress-bar__bar" style="width: 65%;"></div>
|
|
35
|
-
</div>
|
|
36
|
-
</div>
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<div class="rule rule--light"></div>
|
|
40
|
-
|
|
41
|
-
<h2 class="h2">Completed Example</h2>
|
|
42
|
-
<p>An example of a completed progress bar with an icon.</p>
|
|
43
|
-
<div class="progress-bar">
|
|
44
|
-
<div class="progress-bar__header"><strong class="progress-bar__label">Progress</strong>
|
|
45
|
-
<div class="progress-bar__icon">
|
|
46
|
-
<span class="fas fa-check" aria-hidden="true"></span>
|
|
47
|
-
<span class="hidden-visually">Item Completed</span>
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
<div class="progress-bar__track">
|
|
51
|
-
<div class="progress-bar__bar" style="width: 100%;"></div>
|
|
52
|
-
</div>
|
|
53
|
-
<div class="progress-bar__values">
|
|
54
|
-
<div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
|
|
55
|
-
500</div>
|
|
56
|
-
<div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
|
|
61
|
-
<div class="rule rule--light"></div>
|
|
62
|
-
|
|
63
|
-
<h2 class="h2">Deficit Example</h2>
|
|
64
|
-
<p>An example of a progress bar with a deficit.</p>
|
|
65
|
-
<div class="progress-bar">
|
|
66
|
-
<div class="progress-bar__header"><strong class="progress-bar__label">Progress</strong>
|
|
67
|
-
<div class="progress-bar__icon"><span class="fas fa-triangle-exclamation" aria-hidden="true"></span><span class="hidden-visually">Item Has Deficit</span></div>
|
|
68
|
-
</div>
|
|
69
|
-
<div class="progress-bar__track">
|
|
70
|
-
<div class="progress-bar__bar" style="width: 60%;"></div>
|
|
71
|
-
<div class="progress-bar__bar progress-bar__bar--deficit" style="width: 20%;"></div>
|
|
72
|
-
</div>
|
|
73
|
-
<div class="progress-bar__values">
|
|
74
|
-
<div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
|
|
75
|
-
300</div>
|
|
76
|
-
<div class="progress-bar__value progress-bar__value--deficit color-status is-danger"><strong
|
|
77
|
-
class="hidden-visually">Deficit: </strong> -100</div>
|
|
78
|
-
<div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
|
|
79
|
-
</div>
|
|
80
|
-
</div>
|
|
81
|
-
</div>
|
|
82
|
-
|
|
83
|
-
<div class="rule rule--light"></div>
|
|
84
|
-
|
|
85
|
-
<h2 class="h2">Positive Style</h2>
|
|
86
|
-
<p>Uses the <code>.progress-bar--positive</code> modifier.</p>
|
|
87
|
-
<div class="progress-bar progress-bar--positive">
|
|
88
|
-
<div class="progress-bar__header"><strong class="progress-bar__label">Positive</strong></div>
|
|
89
|
-
<div class="progress-bar__track">
|
|
90
|
-
<div class="progress-bar__bar" style="width: 75%;"></div>
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
|
|
94
|
-
<div class="rule rule--light"></div>
|
|
95
|
-
|
|
96
|
-
<h2 class="h2">Negative Style</h2>
|
|
97
|
-
<p>Uses the <code>.progress-bar--negative</code> modifier.</p>
|
|
98
|
-
<div class="progress-bar progress-bar--negative">
|
|
99
|
-
<div class="progress-bar__header"><strong class="progress-bar__label">Negative</strong></div>
|
|
100
|
-
<div class="progress-bar__track">
|
|
101
|
-
<div class="progress-bar__bar" style="width: 30%;"></div>
|
|
102
|
-
</div>
|
|
103
|
-
</div>
|
|
104
|
-
|
|
105
|
-
<div class="rule rule--light"></div>
|
|
106
|
-
|
|
107
|
-
<h2 class="h2">Small Modifier</h2>
|
|
108
|
-
<p>Uses the <code>.progress-bar--small</code> modifier. Font sizing is controlled by the parent element.</p>
|
|
109
|
-
<div class="progress-bar progress-bar--small progress-bar--positive type-small">
|
|
110
|
-
<div class="progress-bar__header"><strong class="progress-bar__label type-normal">Progress</strong>
|
|
111
|
-
<div class="progress-bar__icon">
|
|
112
|
-
<span class="fas fa-check" aria-hidden="true"></span>
|
|
113
|
-
<span class="hidden-visually">Item Completed</span>
|
|
114
|
-
</div>
|
|
115
|
-
</div>
|
|
116
|
-
<div class="progress-bar__track">
|
|
117
|
-
<div class="progress-bar__bar" style="width: 100%;"></div>
|
|
118
|
-
</div>
|
|
119
|
-
<div class="progress-bar__values">
|
|
120
|
-
<div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
|
|
121
|
-
500</div>
|
|
122
|
-
<div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
|
|
123
|
-
</div>
|
|
124
|
-
</div>
|
|
125
|
-
</div>
|
|
126
|
-
|
|
127
|
-
<div class="progress-bar progress-bar--small progress-bar--deficit type-small">
|
|
128
|
-
<div class="progress-bar__header"><strong class="progress-bar__label type-normal">Progress</strong>
|
|
129
|
-
<div class="progress-bar__icon"><span class="fas fa-triangle-exclamation" aria-hidden="true"></span><span class="hidden-visually">Item Has Deficit</span></div>
|
|
130
|
-
</div>
|
|
131
|
-
<div class="progress-bar__track">
|
|
132
|
-
<div class="progress-bar__bar" style="width: 60%;"></div>
|
|
133
|
-
<div class="progress-bar__bar progress-bar__bar--deficit" style="width: 20%;"></div>
|
|
134
|
-
</div>
|
|
135
|
-
<div class="progress-bar__values">
|
|
136
|
-
<div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
|
|
137
|
-
300</div>
|
|
138
|
-
<div class="progress-bar__value progress-bar__value--deficit color-status is-danger"><strong
|
|
139
|
-
class="hidden-visually">Deficit: </strong> -100</div>
|
|
140
|
-
<div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
|
|
141
|
-
</div>
|
|
142
|
-
</div>
|
|
143
|
-
</div>
|
|
144
|
-
|
|
145
|
-
<div class="rule rule--light"></div>
|
|
146
|
-
|
|
147
|
-
<h2 class="h2">Icon left with rail</h2>
|
|
148
|
-
<p>Combining with rail component for icon on left</p>
|
|
149
|
-
|
|
150
|
-
<div class="progress-bar progress-bar--positive">
|
|
151
|
-
<div class="rail">
|
|
152
|
-
<div class="rail__item">
|
|
153
|
-
<div class="progress-bar__icon type-large">
|
|
154
|
-
<span class="fas fa-check" aria-hidden="true"></span>
|
|
155
|
-
</div>
|
|
156
|
-
</div>
|
|
157
|
-
<div class="rail__item flex-grow">
|
|
158
|
-
<div class="progress-bar__header">
|
|
159
|
-
<strong class="progress-bar__label">Progress</strong>
|
|
160
|
-
</div>
|
|
161
|
-
<div class="progress-bar__track">
|
|
162
|
-
<div class="progress-bar__bar" style="width: 100%;"></div>
|
|
163
|
-
</div>
|
|
164
|
-
<div class="progress-bar__values">
|
|
165
|
-
<div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
|
|
166
|
-
300</div>
|
|
167
|
-
<div class="progress-bar__value progress-bar__value--deficit color-status is-danger"><strong
|
|
168
|
-
class="hidden-visually">Deficit: </strong> -100</div>
|
|
169
|
-
<div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
|
|
170
|
-
</div>
|
|
171
|
-
</div>
|
|
172
|
-
</div>
|
|
173
|
-
</div>
|
|
174
|
-
|
|
175
|
-
|