Skip to content

Commit 9ef27a7

Browse files
xdeqxdeq
committed
test hex viewer
1 parent 731b6b6 commit 9ef27a7

File tree

1 file changed

+165
-0
lines changed

1 file changed

+165
-0
lines changed

‎pages/hex-test.vue‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<script setup>
2+
const str = ref("The quick brown fox jumps over the lazy dog repeatedly in the summer sunshine happily ever after")
3+
const hex = ref()
4+
5+
watch(
6+
() => str.value,
7+
() => {
8+
hex.value = Buffer.from(str.value)
9+
.toString("hex")
10+
.match(/../g)
11+
.reduce((acc, current, idx) => {
12+
const chunkIdx = Math.floor(idx / 16)
13+
acc[chunkIdx] = acc[chunkIdx] || []
14+
acc[chunkIdx].push(current)
15+
return acc
16+
}, [])
17+
},
18+
{
19+
immediate: true,
20+
},
21+
)
22+
23+
const selectedIdx = ref()
24+
</script>
25+
26+
<template>
27+
<Flex direction="column" gap="24" wide :class="$style.wrapper">
28+
<Flex direction="column" gap="8">
29+
<input v-model="str" placeholder="Your text" :class="$style.input" />
30+
31+
<Flex align="center" gap="8">
32+
<Text size="12" weight="500" color="support">
33+
Length: <Text color="tertiary">{{ str.length }}</Text>
34+
</Text>
35+
36+
<Text size="12" weight="500" color="support">
37+
Rows: <Text color="tertiary">{{ hex.length }}</Text>
38+
</Text>
39+
</Flex>
40+
</Flex>
41+
42+
<Flex gap="8" :class="$style.viewer">
43+
<Flex direction="column" gap="12">
44+
<Text size="13" weight="600" color="support" mono :class="$style.label">Address</Text>
45+
46+
<Flex direction="column">
47+
<Text v-for="(row, rowIdx) in hex.length" size="13" weight="600" color="support" mono :class="$style.label">
48+
{{ rowIdx.toString(16).padStart(8, "0") }}:
49+
</Text>
50+
</Flex>
51+
</Flex>
52+
53+
<Flex direction="column" gap="12">
54+
<Flex align="center">
55+
<Text
56+
v-for="(column, columnIdx) in 16"
57+
size="13"
58+
weight="600"
59+
color="support"
60+
mono
61+
:class="[$style.label, $style.column]"
62+
>
63+
{{ columnIdx.toString(16).padStart(2, "0") }}
64+
</Text>
65+
</Flex>
66+
67+
<Flex direction="column">
68+
<Flex v-for="(row, rowIdx) in hex" align="center" :class="$style.row">
69+
<Text
70+
v-for="(item, itemIdx) in row"
71+
@click="selectedIdx = `${rowIdx}:${itemIdx}`"
72+
size="13"
73+
weight="600"
74+
color="secondary"
75+
mono
76+
:class="[$style.item, `${rowIdx}:${itemIdx}` === selectedIdx && $style.selected]"
77+
>
78+
{{ item }}
79+
</Text>
80+
</Flex>
81+
</Flex>
82+
</Flex>
83+
</Flex>
84+
</Flex>
85+
</template>
86+
87+
<style module>
88+
.wrapper {
89+
max-width: calc(var(--base-width) + 48px);
90+
91+
padding: 40px 24px 60px 24px;
92+
}
93+
94+
input {
95+
color: var(--txt-primary);
96+
border: 1px solid var(--op-5);
97+
98+
padding: 6px 8px;
99+
}
100+
101+
.viewer {
102+
max-height: 1000px;
103+
104+
overflow-y: auto;
105+
}
106+
107+
.label {
108+
display: flex;
109+
align-items: center;
110+
justify-content: center;
111+
112+
min-height: 22px;
113+
114+
text-transform: uppercase;
115+
116+
padding: 0 4px;
117+
118+
&.column {
119+
min-width: 28px;
120+
121+
&:nth-child(8) {
122+
margin-right: 8px;
123+
}
124+
}
125+
}
126+
127+
.row {
128+
&:hover {
129+
background: var(--op-5);
130+
}
131+
}
132+
133+
.item {
134+
display: flex;
135+
align-items: center;
136+
justify-content: center;
137+
138+
min-width: 28px;
139+
height: 22px;
140+
141+
text-transform: uppercase;
142+
143+
padding: 4px;
144+
145+
transition: none;
146+
147+
&.selected {
148+
background: var(--op-20);
149+
150+
color: var(--txt-primary);
151+
}
152+
153+
&.selected:hover {
154+
background: var(--op-20);
155+
}
156+
157+
&:hover {
158+
background: var(--op-10);
159+
}
160+
161+
&:nth-child(8) {
162+
margin-right: 8px;
163+
}
164+
}
165+
</style>

0 commit comments

Comments
 (0)