Skip to content

Commit ddc1132

Browse files
graphierosgraphieros
committed
Improvement - VueUiDigits - Add config attr to control digit thickness
1 parent c0ca2a8 commit ddc1132

File tree

4 files changed

+119
-34
lines changed

4 files changed

+119
-34
lines changed

‎src/atoms/Digit.vue‎

Lines changed: 115 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,12 @@ const props = defineProps({
2222
y: {
2323
type: Number,
2424
default: 0
25+
},
26+
thickness: {
27+
type: Number,
28+
default: 1
2529
}
26-
})
30+
});
2731
2832
const segments = ref({
2933
/**
@@ -36,48 +40,126 @@ const segments = ref({
3640
* ----
3741
* d
3842
*/
39-
0: '1111110',
40-
1: '0110000',
41-
2: '1101101',
42-
3: '1111001',
43-
4: '0110011',
44-
5: '1011011',
45-
6: '1011111',
46-
7: '1110000',
47-
8: '1111111',
48-
9: '1111011',
49-
'-': '0000001',
50-
X: '0000000'
51-
})
43+
0: "1111110",
44+
1: "0110000",
45+
2: "1101101",
46+
3: "1111001",
47+
4: "0110011",
48+
5: "1011011",
49+
6: "1011111",
50+
7: "1110000",
51+
8: "1111111",
52+
9: "1111011",
53+
"-": "0000001",
54+
X: "0000000"
55+
});
56+
57+
const segmentThickness = computed(() => 2 * (props.thickness || 1));
5258
5359
const digit = computed(() => {
54-
if([undefined, null].includes(props.quanta)) {
60+
if ([undefined, null].includes(props.quanta)) {
5561
return segments.value.X;
5662
} else {
57-
return segments.value[props.quanta]
63+
return segments.value[props.quanta];
5864
}
59-
})
65+
});
6066
</script>
6167

6268
<template>
6369
<g v-if="![undefined, null, '.'].includes(quanta)" data-cy="digit">
6470
<!-- BACKGROUND -->
65-
<!-- a -->
66-
<path data-cy="digit-a" :d="`M ${x} ${y} L ${x+2} ${y-2} L ${x+24} ${y-2} L ${x+26} ${y} L ${x+24} ${y+2} L ${x+2} ${y+2}Z`" :fill="digit[0] == 1 ? color : backgroundColor" stroke="none"/>
67-
<!-- b -->
68-
<path data-cy="digit-b" :d="`M ${x+26} ${y+26} L ${x+26} ${y+4} L ${x+28} ${y+2} L ${x+30} ${y+4} L ${x+30} ${y+26} L ${x+28} ${y+28} L ${x+26} ${y+26}`" :fill="digit[1] == 1 ? color: backgroundColor" stroke="none"/>
69-
<!-- c -->
70-
<path data-cy="digit-c" :d="`M ${x+26} ${y+56} L ${x+26} ${y+34} L ${x+28} ${y+32} L ${x+30} ${y+34} L ${x+30} ${y+56} L ${x+28} ${y+58} L ${x+26} ${y+56}`" :fill="digit[2] == 1 ? color : backgroundColor" stroke="none"/>
71-
<!-- d -->
72-
<path data-cy="digit-d" :d="`M ${x+2} ${y+58} L ${x} ${y+60} L ${x+2} ${y+62} L ${x+24} ${y+62} L ${x+26} ${y+60} L ${x+24} ${y+58} L ${x+2} ${y+58}`" :fill="digit[3] == 1 ? color : backgroundColor" stroke="none"/>
73-
<!-- e -->
74-
<path data-cy="digit-e" :d="`M ${x} ${y+34} L ${x-2} ${y+32} L ${x-4} ${y+34} L ${x-4} ${y+56} L ${x-2} ${y+58} L ${x} ${y+56} L ${x} ${y+34}`" :fill="digit[4] == 1 ? color : backgroundColor" stroke="none"/>
75-
<!-- f -->
76-
<path data-cy="digit-f" :d="`M ${x-2} ${y+2} L ${x} ${y+4} L ${x} ${y+26} L ${x-2} ${y+28} L ${x-4} ${y+26} L ${x-4} ${y+4} L ${x-2} ${y+2}`" :fill="digit[5] == 1 ? color : backgroundColor" stroke="none"/>
77-
<!-- g -->
78-
<path data-cy="digit-g" :d="`M ${x+2} ${y+28} L ${x} ${y+30} L ${x+2} ${y+32} L ${x+24} ${y+32} L ${x+26} ${y+30} L ${x+24} ${y+28} L ${x+2} ${y+28}`" :fill="digit[6] == 1 ? color : backgroundColor" stroke="none"/>
71+
<!-- a (top horizontal) -->
72+
<path
73+
data-cy="digit-a"
74+
:d="`M ${x} ${y}
75+
L ${x + segmentThickness} ${y - segmentThickness}
76+
L ${x + 26 - segmentThickness} ${y - segmentThickness}
77+
L ${x + 26} ${y}
78+
L ${x + 26 - segmentThickness} ${y + segmentThickness}
79+
L ${x + segmentThickness} ${y + segmentThickness} Z`"
80+
:fill="digit[0] == 1 ? color : backgroundColor"
81+
stroke="none"
82+
/>
83+
<!-- b (top right vertical) -->
84+
<path
85+
data-cy="digit-b"
86+
:d="`M ${x + 28 - segmentThickness} ${y + 28 - segmentThickness}
87+
L ${x + 28 - segmentThickness} ${y + 2 + segmentThickness}
88+
L ${x + 28} ${y + 2}
89+
L ${x + 28 + segmentThickness} ${y + 2 + segmentThickness}
90+
L ${x + 28 + segmentThickness} ${y + 28 - segmentThickness}
91+
L ${x + 28} ${y + 28}
92+
L ${x + 28 - segmentThickness} ${y + 28 - segmentThickness}`"
93+
:fill="digit[1] == 1 ? color : backgroundColor"
94+
stroke="none"
95+
/>
96+
<!-- c (bottom right vertical) -->
97+
<path
98+
data-cy="digit-c"
99+
:d="`M ${x + 28 - segmentThickness} ${y + 58 - segmentThickness}
100+
L ${x + 28 - segmentThickness} ${y + 32 + segmentThickness}
101+
L ${x + 28} ${y + 32}
102+
L ${x + 28 + segmentThickness} ${y + 32 + segmentThickness}
103+
L ${x + 28 + segmentThickness} ${y + 58 - segmentThickness}
104+
L ${x + 28} ${y + 58}
105+
L ${x + 28 - segmentThickness} ${y + 58 - segmentThickness}`"
106+
:fill="digit[2] == 1 ? color : backgroundColor"
107+
stroke="none"
108+
/>
109+
<!-- d (bottom horizontal) -->
110+
<path
111+
data-cy="digit-d"
112+
:d="`M ${x + segmentThickness} ${y + 60 - segmentThickness}
113+
L ${x} ${y + 60}
114+
L ${x + segmentThickness} ${y + 60 + segmentThickness}
115+
L ${x + 26 - segmentThickness} ${y + 60 + segmentThickness}
116+
L ${x + 26} ${y + 60}
117+
L ${x + 26 - segmentThickness} ${y + 60 - segmentThickness}
118+
L ${x + segmentThickness} ${y + 60 - segmentThickness}`"
119+
:fill="digit[3] == 1 ? color : backgroundColor"
120+
stroke="none"
121+
/>
122+
<!-- e (bottom left vertical) -->
123+
<path
124+
data-cy="digit-e"
125+
:d="`M ${x - 2 + segmentThickness} ${y + 58 - segmentThickness}
126+
L ${x - 2 + segmentThickness} ${y + 32 + segmentThickness}
127+
L ${x - 2} ${y + 32}
128+
L ${x - 2 - segmentThickness} ${y + 32 + segmentThickness}
129+
L ${x - 2 - segmentThickness} ${y + 58 - segmentThickness}
130+
L ${x - 2} ${y + 58}
131+
L ${x - 2 + segmentThickness} ${y + 58 - segmentThickness}`"
132+
:fill="digit[4] == 1 ? color : backgroundColor"
133+
stroke="none"
134+
/>
135+
<!-- f (top left vertical) -->
136+
<path
137+
data-cy="digit-f"
138+
:d="`M ${x - 2 + segmentThickness} ${y + 28 - segmentThickness}
139+
L ${x - 2 + segmentThickness} ${y + 2 + segmentThickness}
140+
L ${x - 2} ${y + 2}
141+
L ${x - 2 - segmentThickness} ${y + 2 + segmentThickness}
142+
L ${x - 2 - segmentThickness} ${y + 28 - segmentThickness}
143+
L ${x - 2} ${y + 28}
144+
L ${x - 2 + segmentThickness} ${y + 28 - segmentThickness}`"
145+
:fill="digit[5] == 1 ? color : backgroundColor"
146+
stroke="none"
147+
/>
148+
<!-- g (middle horizontal) -->
149+
<path
150+
data-cy="digit-g"
151+
:d="`M ${x + segmentThickness} ${y + 30 - segmentThickness}
152+
L ${x} ${y + 30}
153+
L ${x + segmentThickness} ${y + 30 + segmentThickness}
154+
L ${x + 26 - segmentThickness} ${y + 30 + segmentThickness}
155+
L ${x + 26} ${y + 30}
156+
L ${x + 26 - segmentThickness} ${y + 30 - segmentThickness}
157+
L ${x + segmentThickness} ${y + 30 - segmentThickness}`"
158+
:fill="digit[6] == 1 ? color : backgroundColor"
159+
stroke="none"
160+
/>
79161
</g>
80162
<g v-if="quanta == '.'">
81-
<circle data-cy="digit-decimal" :cx="x - 8" :cy="y + 60" :r="3" :fill="color"/>
163+
<circle data-cy="digit-decimal" :cx="x - 8" :cy="y + 60" :r="2 + segmentThickness / 2" :fill="color" />
82164
</g>
83-
</template>
165+
</template>

‎src/components/vue-ui-digits.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ const maxY = computed(() => {
6666
:quanta="digit.quanta"
6767
:color="FINAL_CONFIG.digits.color"
6868
:backgroundColor="FINAL_CONFIG.digits.skeletonColor"
69+
:thickness="FINAL_CONFIG.digits.thickness"
6970
/>
7071
</svg>
7172
</template>

‎src/useConfig.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5872,7 +5872,8 @@ export function useConfig() {
58725872
backgroundColor: COLOR_WHITE,
58735873
digits: {
58745874
color: COLOR_BLACK,
5875-
skeletonColor: COLOR_GREY_LIGHT
5875+
skeletonColor: COLOR_GREY_LIGHT,
5876+
thickness: 1,
58765877
}
58775878
}
58785879

‎types/vue-data-ui.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1092,6 +1092,7 @@ declare module "vue-data-ui" {
10921092
digits?: {
10931093
color?: string;
10941094
skeletonColor?: string;
1095+
thickness?: number;
10951096
};
10961097
};
10971098

0 commit comments

Comments
 (0)