/
settings.vue
103 lines (97 loc) · 2.92 KB
/
settings.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<script setup lang="ts">
const {
interactionCloseOnOutsideClick,
showExperimentalFeatures,
showHelpButtons,
scale,
hiddenTabs,
hiddenTabCategories,
} = useDevToolsSettings()
const scaleOptions = [
['Tiny', 12 / 15],
['Small', 14 / 15],
['Normal', 1],
['Large', 16 / 15],
['Huge', 18 / 15],
]
const categories = useCategorizedTabs(false)
function toggleTab(name: string, v: boolean) {
if (v)
hiddenTabs.value = hiddenTabs.value.filter(i => i !== name)
else
hiddenTabs.value.push(name)
}
function toggleTabCategory(name: string, v: boolean) {
if (v)
hiddenTabCategories.value = hiddenTabCategories.value.filter(i => i !== name)
else
hiddenTabCategories.value.push(name)
}
</script>
<template>
<div max-w-100 px6 py8>
<NIconTitle
class="text-xl op75"
icon="i-carbon-settings"
text="DevTools Settings"
/>
<div py3 flex="~ col gap-1" border="b base">
<h3 mb1 text-lg>
UI Scale
</h3>
<NSelect v-model="scale" n="primary">
<option v-for="i of scaleOptions" :key="i[0]" :value="i[1]">
{{ i[0] }}
</option>
</NSelect>
</div>
<div py3 flex="~ col gap-1" border="b base">
<h3 mb1 text-lg>
Features
</h3>
<NCheckbox v-model="interactionCloseOnOutsideClick" n-primary>
<span>Close DevTools when clicking outside</span>
</NCheckbox>
<NCheckbox v-model="showExperimentalFeatures" n-primary>
<span>Show experimental features</span>
</NCheckbox>
<NCheckbox v-model="showHelpButtons" n-primary>
<span>Show help buttons</span>
</NCheckbox>
</div>
<div py3 flex="~ col gap-1">
<h3 mb1 text-lg>
Tabs
</h3>
<template v-for="[name, tabs] of categories" :key="name">
<div
v-if="tabs.length"
flex="~ col gap-1"
:class="hiddenTabCategories.includes(name) ? 'op50 grayscale' : ''" pt-2
>
<NSwitch
flex="~ row-reverse" py1 n-lime border="b base"
:model-value="!hiddenTabCategories.includes(name)"
@update:model-value="v => toggleTabCategory(name, v)"
>
<div flex="~ gap-2" flex-auto items-center justify-start>
<span capitalize op75>{{ name }}</span>
</div>
</NSwitch>
<template v-for="tab of tabs" :key="tab.name">
<NSwitch
flex="~ row-reverse" py1 n-primary
:model-value="!hiddenTabs.includes(tab.name)"
@update:model-value="v => toggleTab(tab.name, v)"
>
<div flex="~ gap-2" flex-auto items-center justify-start :class="hiddenTabs.includes(tab.name) ? 'op25' : ''">
<TabIcon text-xl :icon="tab.icon" :title="tab.title" />
<span>{{ tab.title }}</span>
</div>
</NSwitch>
</template>
</div>
</template>
</div>
</div>
</template>