@klodd/ds 5.0.0 → 5.2.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.
|
@@ -87,3 +87,52 @@
|
|
|
87
87
|
transition: none;
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
|
+
|
|
91
|
+
/* ================================================================
|
|
92
|
+
.progress-list (v5.1.0): wrapper-pattern for stack av items dar
|
|
93
|
+
varje item har en label-row + en .progress-bar. Lyft fran Ekonoms
|
|
94
|
+
ekonom.css (cat-bar-list/cat-bar-row) till paketet sa apparna delar
|
|
95
|
+
list-pattern istallet for att ha lokala dubletter.
|
|
96
|
+
|
|
97
|
+
Anvands:
|
|
98
|
+
<ul class="progress-list">
|
|
99
|
+
<li>
|
|
100
|
+
<div class="progress-list__row">
|
|
101
|
+
<span>Mat</span>
|
|
102
|
+
<span class="text-num ml-auto">3 240 kr</span>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="progress">
|
|
105
|
+
<div class="progress__bar cat-mat" data-bar-width="80%"></div>
|
|
106
|
+
</div>
|
|
107
|
+
</li>
|
|
108
|
+
</ul>
|
|
109
|
+
|
|
110
|
+
Blocks:
|
|
111
|
+
.progress-list - <ul>-reset + spacing mellan items
|
|
112
|
+
|
|
113
|
+
Element:
|
|
114
|
+
.progress-list__row - flex-row for label + amount ovan en .progress
|
|
115
|
+
================================================================ */
|
|
116
|
+
.progress-list {
|
|
117
|
+
list-style: none;
|
|
118
|
+
padding: 0;
|
|
119
|
+
margin: 0;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.progress-list > li {
|
|
123
|
+
margin-bottom: var(--space-14);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.progress-list > li:last-child {
|
|
127
|
+
margin-bottom: 0;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.progress-list__row {
|
|
131
|
+
display: flex;
|
|
132
|
+
align-items: center;
|
|
133
|
+
gap: var(--space-10);
|
|
134
|
+
margin-bottom: var(--space-6);
|
|
135
|
+
font-size: var(--fs-14);
|
|
136
|
+
color: var(--text-default);
|
|
137
|
+
flex-wrap: wrap;
|
|
138
|
+
}
|
package/js/hero-roll.js
CHANGED
|
@@ -107,7 +107,10 @@
|
|
|
107
107
|
function buildAndAnimate ( el ) {
|
|
108
108
|
if ( ! el ) return;
|
|
109
109
|
if ( el.dataset.rolled === 'true' ) return;
|
|
110
|
-
|
|
110
|
+
// parseFloat sa decimaler stods. 'data-animate-roll="8.5"' rullar
|
|
111
|
+
// "8" som digit-roller och "5" som digit-roller, med "." mellan
|
|
112
|
+
// som static-char.
|
|
113
|
+
const target = parseFloat( el.dataset.animateRoll );
|
|
111
114
|
if ( isNaN( target ) ) return;
|
|
112
115
|
|
|
113
116
|
// No-op for 0
|
|
@@ -121,8 +124,14 @@
|
|
|
121
124
|
const originalText = el.textContent;
|
|
122
125
|
const isNegative = target < 0;
|
|
123
126
|
const absTarget = Math.abs( target );
|
|
124
|
-
|
|
125
|
-
|
|
127
|
+
// Split bevarar decimal-punkt som '.' i array. Heltalsdel separat
|
|
128
|
+
// fran decimaldel for thousand-separator-injektion (1 234 567).
|
|
129
|
+
const targetStr = String( absTarget );
|
|
130
|
+
const dotIndex = targetStr.indexOf( '.' );
|
|
131
|
+
const intPart = dotIndex >= 0 ? targetStr.slice( 0, dotIndex ) : targetStr;
|
|
132
|
+
const decPart = dotIndex >= 0 ? targetStr.slice( dotIndex + 1 ) : '';
|
|
133
|
+
const intDigits = intPart.split( '' ).map( Number );
|
|
134
|
+
const intLen = intDigits.length;
|
|
126
135
|
|
|
127
136
|
const fragment = document.createDocumentFragment();
|
|
128
137
|
|
|
@@ -131,17 +140,35 @@
|
|
|
131
140
|
}
|
|
132
141
|
|
|
133
142
|
const rollers = [];
|
|
134
|
-
|
|
143
|
+
// Heltalsdel: digit-rollers med thousand-separator var 3:e siffra
|
|
144
|
+
// fran hoger.
|
|
145
|
+
intDigits.forEach( function ( d, i ) {
|
|
135
146
|
const r = buildRoller( d );
|
|
136
147
|
fragment.appendChild( r.roller );
|
|
137
148
|
rollers.push( r );
|
|
138
|
-
const fromRight =
|
|
149
|
+
const fromRight = intLen - 1 - i;
|
|
139
150
|
if ( fromRight > 0 && fromRight % 3 === 0 ) {
|
|
140
151
|
fragment.appendChild( buildStaticChar( ' ' ) );
|
|
141
152
|
}
|
|
142
153
|
} );
|
|
143
154
|
|
|
144
|
-
|
|
155
|
+
// Decimal-del: punkt + digit-rollers per decimalsiffra.
|
|
156
|
+
if ( decPart.length > 0 ) {
|
|
157
|
+
fragment.appendChild( buildStaticChar( '.' ) );
|
|
158
|
+
decPart.split( '' ).map( Number ).forEach( function ( d ) {
|
|
159
|
+
const r = buildRoller( d );
|
|
160
|
+
fragment.appendChild( r.roller );
|
|
161
|
+
rollers.push( r );
|
|
162
|
+
} );
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
// Suffix konfigurerbart via data-roll-suffix. Default ' kr'
|
|
166
|
+
// for Ekonom-bakatkompat - appar utan kr-suffix sattler
|
|
167
|
+
// data-roll-suffix="" pa elementet.
|
|
168
|
+
const suffix = el.dataset.rollSuffix !== undefined ? el.dataset.rollSuffix : ' kr';
|
|
169
|
+
if ( suffix ) {
|
|
170
|
+
fragment.appendChild( buildStaticChar( suffix ) );
|
|
171
|
+
}
|
|
145
172
|
|
|
146
173
|
// Mat font-line-height for digit-roller-hojd.
|
|
147
174
|
const computed = window.getComputedStyle( el );
|
package/package.json
CHANGED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# 0023 - .progress-list utility lyft till paketet
|
|
2
|
+
|
|
3
|
+
**Status:** Locked
|
|
4
|
+
**Datum:** 2026-05-15
|
|
5
|
+
**Version:** @klodd/ds 5.1.0
|
|
6
|
+
|
|
7
|
+
## Beslut
|
|
8
|
+
|
|
9
|
+
Lägg `.progress-list` + `.progress-list__row` i `components/progress.css`
|
|
10
|
+
som generic wrapper-pattern för "lista av items där varje har label-row +
|
|
11
|
+
en .progress-bar".
|
|
12
|
+
|
|
13
|
+
Tidigare bodde dessa som `.cat-bar-list` + `.cat-bar-row` i Ekonoms
|
|
14
|
+
`ekonom.css` (legacy-namn från innan v5.0.0 när bar-komponenter var
|
|
15
|
+
separata). Lyft till paketet för att:
|
|
16
|
+
|
|
17
|
+
1. Eliminera Ekonom-domain-CSS som inte är domain-specifikt
|
|
18
|
+
2. Ge framtida appar samma list-pattern utan kopiering
|
|
19
|
+
3. Tydliggöra att klassen wrappar `.progress` (inte är en alternativ
|
|
20
|
+
bar-stil)
|
|
21
|
+
|
|
22
|
+
## Konsekvens
|
|
23
|
+
|
|
24
|
+
- Ekonoms `ekonom.css` raderar `.cat-bar-list`, `.cat-bar-row`,
|
|
25
|
+
`.budget-bar-wrapper` (43 rader)
|
|
26
|
+
- Ekonoms 4 templates (avstamning, kategorier, privat, bolan) migreras
|
|
27
|
+
till `.progress-list` / `.progress-list__row`
|
|
28
|
+
- `.budget-bar-wrapper` (padding 0 0 8 0 wrapper) raderas helt - parent-
|
|
29
|
+
spacing räcker, ingen ersättning
|
|
30
|
+
- /design "local-wrappers"-sektion raderas (Ekonom-domain krymper från
|
|
31
|
+
5 till 3 sektioner: review-flow, avi-flow, cat-bindings)
|
|
32
|
+
|
|
33
|
+
## Definitioner
|
|
34
|
+
|
|
35
|
+
```css
|
|
36
|
+
.progress-list {
|
|
37
|
+
list-style: none;
|
|
38
|
+
padding: 0;
|
|
39
|
+
margin: 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.progress-list > li {
|
|
43
|
+
margin-bottom: var(--space-14);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.progress-list > li:last-child {
|
|
47
|
+
margin-bottom: 0;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.progress-list__row {
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
gap: var(--space-10);
|
|
54
|
+
margin-bottom: var(--space-6);
|
|
55
|
+
font-size: var(--fs-14);
|
|
56
|
+
color: var(--text-default);
|
|
57
|
+
flex-wrap: wrap;
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Användning
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<ul class="progress-list">
|
|
65
|
+
<li>
|
|
66
|
+
<div class="progress-list__row">
|
|
67
|
+
<span>Mat</span>
|
|
68
|
+
<span class="text-num ml-auto">3 240 kr</span>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="progress">
|
|
71
|
+
<div class="progress__bar cat-mat" data-bar-width="80%"></div>
|
|
72
|
+
</div>
|
|
73
|
+
</li>
|
|
74
|
+
</ul>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Calle's direktiv (2026-05-15)
|
|
78
|
+
|
|
79
|
+
> "Vi ska ha en bar-stil, och den ska definieras under 'progress' eller
|
|
80
|
+
> 'bar' eller vad som är tydligast. Alla andra ska raderas, och alla
|
|
81
|
+
> som idag använder någon form av bar ska ha den nya."
|
|
82
|
+
|
|
83
|
+
Konsoliderar EN bar-stil (.progress, ADR 0022) + EN list-pattern för
|
|
84
|
+
bars (.progress-list, denna ADR), båda i paketet, ingen i app-domain.
|