Skip to content

Commit 19a7979

Browse files
AkryumAkryum
committed
docs: fix theme editor
1 parent 5e106c4 commit 19a7979

File tree

12 files changed

+78
-69
lines changed

12 files changed

+78
-69
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ module.exports = {
5252
'@typescript-eslint/no-empty-function': 'off',
5353
indent: 'off',
5454
'@typescript-eslint/no-this-alias': 'off',
55+
'func-call-spacing': 'off',
5556
},
5657
ignorePatterns: [
5758
'node_modules/',

‎docs/.vitepress/components/theme-editor/ConfigEditor.vue‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export default {
7575

7676
<template>
7777
<div class="overflow-hidden flex flex-col items-stretch">
78-
<div class="text-gray-500 flex items-center border-b border-gray-100">
78+
<div class="text-gray-500 flex items-center border-b border-gray-100 dark:border-gray-800">
7979
<ToolIcon class="w-4 h-4 mx-2" />
8080
<span class="flex-1">
8181
Theme Configuration
@@ -94,15 +94,15 @@ export default {
9494

9595
<div class="overflow-auto">
9696
<template v-if="tab === 'general'">
97-
<div class="flex space-x-1 hover:bg-gray-50 p-2">
97+
<div class="flex space-x-1 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
9898
<span>Theme name:</span>
9999
<input
100100
v-model="theme.name"
101-
class="w-0 flex-1 border border-gray-300 rounded px-1"
101+
class="w-0 flex-1 border border-gray-300 dark:border-gray-700 rounded px-1"
102102
>
103103
</div>
104104

105-
<div class="flex space-x-1 hover:bg-gray-50 p-2">
105+
<div class="flex space-x-1 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
106106
<label for="extend">Inherit another theme:</label>
107107
<select
108108
id="extend"
@@ -124,7 +124,7 @@ export default {
124124
</select>
125125
</div>
126126

127-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
127+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
128128
<span>Reset CSS:</span>
129129
<label
130130
v-for="value of [undefined, true, false]"
@@ -142,7 +142,7 @@ export default {
142142
</template>
143143

144144
<template v-if="tab === 'display'">
145-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
145+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
146146
<span>Triggers:</span>
147147
<label class="flex items-center space-x-1">
148148
<input
@@ -167,7 +167,7 @@ export default {
167167
</template>
168168
</div>
169169

170-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
170+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
171171
<span>Delay (ms):</span>
172172
<label class="flex items-center space-x-1">
173173
<input
@@ -210,7 +210,7 @@ export default {
210210
</template>
211211
</div>
212212

213-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
213+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
214214
<span>Auto hide:</span>
215215
<label
216216
v-for="value of [undefined, true, false]"
@@ -226,7 +226,7 @@ export default {
226226
</label>
227227
</div>
228228

229-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
229+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
230230
<span>Eager mount:</span>
231231
<label
232232
v-for="value of [undefined, true, false]"
@@ -244,7 +244,7 @@ export default {
244244
</template>
245245

246246
<template v-if="tab === 'position'">
247-
<div class="flex space-x-1 hover:bg-gray-50 p-2">
247+
<div class="flex space-x-1 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
248248
<label for="placement">Placement:</label>
249249
<select
250250
id="placement"
@@ -266,7 +266,7 @@ export default {
266266
</select>
267267
</div>
268268

269-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
269+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
270270
<span>Strategy:</span>
271271
<label
272272
v-for="value of [undefined, 'absolute', 'fixed']"
@@ -282,7 +282,7 @@ export default {
282282
</label>
283283
</div>
284284

285-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
285+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
286286
<span>Distance (px):</span>
287287
<label class="flex items-center space-x-1">
288288
<input
@@ -308,7 +308,7 @@ export default {
308308
</template>
309309
</div>
310310

311-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
311+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
312312
<span>Skidding (px):</span>
313313
<label class="flex items-center space-x-1">
314314
<input
@@ -334,7 +334,7 @@ export default {
334334
</template>
335335
</div>
336336

337-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
337+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
338338
<span>Arrow padding (px):</span>
339339
<label class="flex items-center space-x-1">
340340
<input
@@ -360,7 +360,7 @@ export default {
360360
</template>
361361
</div>
362362

363-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
363+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
364364
<span>Instant move:</span>
365365
<label
366366
v-for="value of [undefined, true, false]"
@@ -376,7 +376,7 @@ export default {
376376
</label>
377377
</div>
378378

379-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
379+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
380380
<span>Handle resize:</span>
381381
<label
382382
v-for="value of [undefined, true, false]"
@@ -392,7 +392,7 @@ export default {
392392
</label>
393393
</div>
394394

395-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
395+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
396396
<span>Compute transform origin:</span>
397397
<label
398398
v-for="value of [undefined, true, false]"
@@ -408,7 +408,7 @@ export default {
408408
</label>
409409
</div>
410410

411-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
411+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
412412
<span>Prevent overflow:</span>
413413
<label
414414
v-for="value of [undefined, true, false]"
@@ -424,7 +424,7 @@ export default {
424424
</label>
425425
</div>
426426

427-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
427+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
428428
<span>Overflow padding (px):</span>
429429
<label class="flex items-center space-x-1">
430430
<input
@@ -450,7 +450,7 @@ export default {
450450
</template>
451451
</div>
452452

453-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
453+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
454454
<span>Arrow overflow:</span>
455455
<label
456456
v-for="value of [undefined, true, false]"
@@ -466,7 +466,7 @@ export default {
466466
</label>
467467
</div>
468468

469-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
469+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
470470
<span>Flip:</span>
471471
<label
472472
v-for="value of [undefined, true, false]"
@@ -482,7 +482,7 @@ export default {
482482
</label>
483483
</div>
484484

485-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
485+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
486486
<span>Shift:</span>
487487
<label
488488
v-for="value of [undefined, true, false]"
@@ -498,7 +498,7 @@ export default {
498498
</label>
499499
</div>
500500

501-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
501+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
502502
<span>Shift cross axis:</span>
503503
<label
504504
v-for="value of [undefined, true, false]"
@@ -514,7 +514,7 @@ export default {
514514
</label>
515515
</div>
516516

517-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
517+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
518518
<span>Auto size:</span>
519519
<label
520520
v-for="value of [undefined, true, false, 'min', 'max']"
@@ -530,7 +530,7 @@ export default {
530530
</label>
531531
</div>
532532

533-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
533+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
534534
<span>Auto boundary max size:</span>
535535
<label
536536
v-for="value of [undefined, true, false]"
@@ -548,7 +548,7 @@ export default {
548548
</template>
549549

550550
<template v-if="tab === 'directive'">
551-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
551+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
552552
<span>Allow HTML content:</span>
553553
<label
554554
v-for="value of [undefined, true, false]"
@@ -564,7 +564,7 @@ export default {
564564
</label>
565565
</div>
566566

567-
<div class="flex space-x-1 hover:bg-gray-50 p-2">
567+
<div class="flex space-x-1 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
568568
<span>Loading placeholder content:</span>
569569
<label class="flex items-center space-x-1">
570570
<input
@@ -576,7 +576,7 @@ export default {
576576
<input
577577
v-if="!inheritLoadingContent"
578578
v-model="theme.config.loadingContent"
579-
class="w-0 flex-1 border border-gray-300 rounded px-1"
579+
class="w-0 flex-1 border border-gray-300 dark:border-gray-700 rounded px-1"
580580
>
581581
</div>
582582
</template>

‎docs/.vitepress/components/theme-editor/CreateTheme.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default {
4747

4848
<template>
4949
<ThemeModal>
50-
<div class="text-lg border-b border-gray-100">
50+
<div class="text-lg border-b border-gray-100 dark:border-gray-800">
5151
Create theme
5252
</div>
5353

‎docs/.vitepress/components/theme-editor/Sandbox.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export default {
5252
[settings.darkClass]: settings.darkMode,
5353
}"
5454
>
55-
<div class="flex-none border-b border-gray-100 p-1 flex items-center space-x-2 overflow-x-auto">
55+
<div class="flex-none border-b border-gray-100 dark:border-gray-800 p-1 flex items-center space-x-2 overflow-x-auto">
5656
<span>Shown:</span>
5757
<label
5858
v-for="n in 3"

‎docs/.vitepress/components/theme-editor/StyleEditor.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export default {
8484

8585
<template>
8686
<div class="overflow-hidden flex flex-col items-stretch">
87-
<div class="flex items-center border-b border-gray-100">
87+
<div class="flex items-center border-b border-gray-100 dark:border-gray-800">
8888
<div class="flex-1 flex items-center p-2 text-gray-500">
8989
<PenToolIcon class="w-4 h-4 mr-2" />
9090
Style
@@ -103,7 +103,7 @@ export default {
103103
v-if="currentStyle"
104104
class="flex-1 overflow-auto flex flex-col items-stretch"
105105
>
106-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
106+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
107107
<label for="backgroundColor">Background color:</label>
108108
<label class="flex items-center space-x-1">
109109
<input
@@ -132,7 +132,7 @@ export default {
132132
</template>
133133
</div>
134134

135-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
135+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
136136
<label for="backgroundColor">Text color:</label>
137137
<label class="flex items-center space-x-1">
138138
<input
@@ -161,7 +161,7 @@ export default {
161161
</template>
162162
</div>
163163

164-
<div class="hover:bg-gray-50 p-2 space-y-2">
164+
<div class="hover:bg-gray-50 dark:hover:bg-gray-800 p-2 space-y-2">
165165
<div class="flex space-x-3">
166166
<label for="backgroundColor">Padding:</label>
167167
<label class="flex items-center space-x-1">
@@ -279,7 +279,7 @@ export default {
279279
</div>
280280
</div>
281281

282-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
282+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
283283
<label for="backgroundColor">Border:</label>
284284
<label class="flex items-center space-x-1">
285285
<input
@@ -305,7 +305,7 @@ export default {
305305
</template>
306306
</div>
307307

308-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
308+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
309309
<label for="backgroundColor">Border radius:</label>
310310
<label class="flex items-center space-x-1">
311311
<input
@@ -330,7 +330,7 @@ export default {
330330
</template>
331331
</div>
332332

333-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
333+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
334334
<label for="backgroundColor">Drop shadow:</label>
335335
<label class="flex items-center space-x-1">
336336
<input
@@ -392,7 +392,7 @@ export default {
392392
</template>
393393
</div>
394394

395-
<div class="flex space-x-3 hover:bg-gray-50 p-2">
395+
<div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
396396
<label for="backgroundColor">Arrow:</label>
397397
<label class="flex items-center space-x-1">
398398
<input

‎docs/.vitepress/components/theme-editor/Tabs.vue‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,30 @@
1-
<script>
2-
export default {
3-
props: [
4-
'value',
5-
'tabs',
6-
],
1+
<script lang="ts" setup>
2+
export interface Tab {
3+
id: string
4+
label: string
5+
icon?: string
76
}
7+
8+
defineProps<{
9+
modelValue: string
10+
tabs: Tab[]
11+
}>()
12+
13+
defineEmits<{
14+
(e: 'update:modelValue', value: string): void
15+
}>()
816
</script>
917

1018
<template>
11-
<div class="flex-none flex">
19+
<div class="flex-none flex dark:text-gray-200">
1220
<button
1321
v-for="(tab, index) in tabs"
1422
:key="index"
15-
class="px-3 py-2 relative hover:bg-green-100 flex items-center"
23+
class="px-3 py-2 relative hover:bg-green-100 dark:hover:bg-green-900 flex items-center"
1624
:class="{
17-
'text-green-500 font-medium': value === tab.id,
25+
'text-green-500 font-medium': modelValue === tab.id,
1826
}"
19-
@click="$emit('input', tab.id)"
27+
@click="$emit('update:modelValue', tab.id)"
2028
>
2129
<component
2230
:is="tab.icon"
@@ -29,7 +37,7 @@ export default {
2937
</slot>
3038

3139
<div
32-
v-if="value === tab.id"
40+
v-if="modelValue === tab.id"
3341
class="absolute bottom-0 left-0 w-full border-b-2 border-green-500"
3442
/>
3543
</button>

0 commit comments

Comments
 (0)