vue-ts-seven-segment-display
Version:
A simple seven-segment display component built with Vue and TypeScript.
124 lines (123 loc) • 6.02 kB
JavaScript
import { defineComponent as h, computed as i, createElementBlock as n, openBlock as r, normalizeStyle as v, Fragment as a, renderList as L, createElementVNode as S } from "vue";
const y = ["height"], F = ["d", "fill"], Z = /* @__PURE__ */ h({
__name: "SevenSegmentDisplay",
props: {
value: {
type: [Number, String, null],
default: null
},
height: {
type: [Number, String],
required: !1,
default: 96
},
segmentSize: {
type: Number,
required: !1,
default: 8
},
color: {
type: String,
required: !1,
default: "#545C6C"
},
bgColor: {
type: String,
required: !1,
default: "#F2F2F2"
},
spacing: {
type: [Number, String],
required: !1,
default: 8
},
startFromEnd: Boolean,
autoGrow: Boolean
},
setup(l) {
const b = i(() => l.autoGrow && l.value !== null && l.value.toString().length > l.segmentSize ? l.value.toString().length : l.segmentSize), d = i(() => Array.from({ length: b.value }, (f, c) => {
if (l.value === null) return g.null;
const o = l.value.toString().toUpperCase();
let e = c < o.length ? c : null, C = o.charAt(0) === "-" && c === 0;
if (l.startFromEnd && (e = c < b.value - o.length ? null : c, C = C && e === b.value - o.length), e !== null) {
let t = l.startFromEnd ? e - (b.value - o.length) : c;
if (C) return g["-"];
const u = o.charAt(t);
return u in g ? g[u] : g.null;
}
return g.null;
})), g = {
null: [l.bgColor, l.bgColor, l.bgColor, l.bgColor, l.bgColor, l.bgColor, l.bgColor],
" ": [l.bgColor, l.bgColor, l.bgColor, l.bgColor, l.bgColor, l.bgColor, l.bgColor],
"-": [l.bgColor, l.bgColor, l.bgColor, l.bgColor, l.bgColor, l.bgColor, l.color],
_: [l.bgColor, l.bgColor, l.bgColor, l.color, l.bgColor, l.bgColor, l.bgColor],
"=": [l.bgColor, l.bgColor, l.bgColor, l.color, l.bgColor, l.bgColor, l.color],
"[": [l.color, l.bgColor, l.bgColor, l.color, l.color, l.color, l.bgColor],
"]": [l.color, l.color, l.color, l.color, l.bgColor, l.bgColor, l.bgColor],
0: [l.color, l.color, l.color, l.color, l.color, l.color, l.bgColor],
1: [l.bgColor, l.color, l.color, l.bgColor, l.bgColor, l.bgColor, l.bgColor],
2: [l.color, l.color, l.bgColor, l.color, l.color, l.bgColor, l.color],
3: [l.color, l.color, l.color, l.color, l.bgColor, l.bgColor, l.color],
4: [l.bgColor, l.color, l.color, l.bgColor, l.bgColor, l.color, l.color],
5: [l.color, l.bgColor, l.color, l.color, l.bgColor, l.color, l.color],
6: [l.color, l.bgColor, l.color, l.color, l.color, l.color, l.color],
7: [l.color, l.color, l.color, l.bgColor, l.bgColor, l.bgColor, l.bgColor],
8: [l.color, l.color, l.color, l.color, l.color, l.color, l.color],
9: [l.color, l.color, l.color, l.color, l.bgColor, l.color, l.color],
A: [l.color, l.color, l.color, l.bgColor, l.color, l.color, l.color],
B: [l.bgColor, l.bgColor, l.color, l.color, l.color, l.color, l.color],
C: [l.color, l.bgColor, l.bgColor, l.color, l.color, l.color, l.bgColor],
D: [l.bgColor, l.color, l.color, l.color, l.color, l.bgColor, l.color],
E: [l.color, l.bgColor, l.bgColor, l.color, l.color, l.color, l.color],
F: [l.color, l.bgColor, l.bgColor, l.bgColor, l.color, l.color, l.color],
G: [l.color, l.bgColor, l.color, l.color, l.color, l.color, l.bgColor],
H: [l.bgColor, l.bgColor, l.color, l.bgColor, l.color, l.color, l.color],
I: [l.bgColor, l.bgColor, l.bgColor, l.bgColor, l.color, l.color, l.bgColor],
J: [l.bgColor, l.color, l.color, l.color, l.color, l.bgColor, l.bgColor],
K: [l.color, l.bgColor, l.color, l.bgColor, l.color, l.color, l.color],
L: [l.bgColor, l.bgColor, l.bgColor, l.color, l.color, l.color, l.bgColor],
M: [l.color, l.bgColor, l.color, l.bgColor, l.color, l.bgColor, l.bgColor],
N: [l.color, l.color, l.color, l.bgColor, l.color, l.color, l.bgColor],
O: [l.color, l.color, l.color, l.color, l.color, l.color, l.bgColor],
P: [l.color, l.color, l.bgColor, l.bgColor, l.color, l.color, l.color],
Q: [l.color, l.color, l.color, l.bgColor, l.bgColor, l.color, l.color],
R: [l.color, l.color, l.bgColor, l.bgColor, l.color, l.color, l.bgColor],
S: [l.color, l.bgColor, l.color, l.color, l.bgColor, l.color, l.color],
T: [l.bgColor, l.bgColor, l.bgColor, l.color, l.color, l.color, l.color],
U: [l.bgColor, l.color, l.color, l.color, l.color, l.color, l.bgColor],
V: [l.bgColor, l.color, l.color, l.color, l.bgColor, l.color, l.bgColor],
W: [l.bgColor, l.color, l.bgColor, l.color, l.bgColor, l.color, l.bgColor],
X: [l.bgColor, l.color, l.color, l.bgColor, l.color, l.color, l.color],
Y: [l.bgColor, l.color, l.color, l.color, l.bgColor, l.color, l.color],
Z: [l.color, l.color, l.bgColor, l.color, l.bgColor, l.bgColor, l.color]
}, m = [
"M49 0H15L8 7L15 14H49L56 7L49 0Z",
"M64 51L64 15L57 8L50 15L50 44L57 51L64 51Z",
"M64 53L64 89L57 96L50 89L50 60L57 53L64 53Z",
"M49 90H15L8 97L15 104H49L56 97L49 90Z",
"M1.87959e-06 53L3.0598e-07 89L7 96L14 89L14 60L7 53L1.87959e-06 53Z",
"M1.87959e-06 51L3.0598e-07 15L7 8L14 15L14 44L7 51L1.87959e-06 51Z",
"M49 45H15L8 52L15 59H49L56 52L49 45Z"
];
return (f, c) => (r(), n("div", {
style: v({ display: "flex", alignItems: "center", justifyContent: "center", gap: `${l.spacing}px` })
}, [
(r(!0), n(a, null, L(d.value, (o, e) => (r(), n("svg", {
key: `segment-${e}`,
height: l.height,
viewBox: "0 0 64 104",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, [
(r(), n(a, null, L(m, (C, t) => S("path", {
key: `segment-digit-${t}`,
d: C,
fill: o[t]
}, null, 8, F)), 64))
], 8, y))), 128))
], 4));
}
});
export {
Z as default
};