DEL: Old components
This commit is contained in:
Robert Kossessa
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-for="(config, index) in config_tabs"
|
||||
:key="config"
|
||||
:data-selected="current_tab===config.id"
|
||||
class="px-4 h-20 flex items-center hover:bg-zinc-900 data-[selected=true]:bg-zinc-200 hover:data-[selected=true]:bg-zinc-100 data-[selected=true]:text-black border-solid border-0 border-b"
|
||||
:class="config.disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
|
||||
@click="current_tab=config.disabled ? current_tab : config.id; $refs.configSelect[index].scramble()">
|
||||
<div class="w-full">
|
||||
<h1 class="text-lg text-nowrap" :class="{'text-muted-foreground': config.disabled}">
|
||||
<ScrambleText ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" />
|
||||
<Badge
|
||||
v-if="config.hasOwnProperty('badgeKey')"
|
||||
v-t="config.badgeKey"
|
||||
class="font-mono ml-2 rounded-full h-4 align-middle bg-zinc-900 text-muted-foreground" />
|
||||
</h1>
|
||||
</div>
|
||||
<ChevronRight v-if="current_tab === config.id" class="float-right" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import ScrambleText from '@renderer/components/common/ScrambleText.vue'
|
||||
import { Badge } from '@renderer/components/ui/badge'
|
||||
import { ChevronRight } from 'lucide-vue-next'
|
||||
|
||||
const config_tabs = ref([
|
||||
{ id: 'profile_settings' },
|
||||
{ id: 'feedback_designer' },
|
||||
{ id: 'mapping_configuration' },
|
||||
{ id: 'light_designer' },
|
||||
{
|
||||
id: 'gui_designer',
|
||||
disabled: true,
|
||||
badgeKey: 'common.coming_soon',
|
||||
},
|
||||
{ id: 'dev_playground' },
|
||||
])
|
||||
|
||||
const current_tab = defineModel({
|
||||
type: String,
|
||||
default: 'profile_settings',
|
||||
})
|
||||
</script>
|
||||
@@ -1,8 +0,0 @@
|
||||
<template>
|
||||
<WIP />
|
||||
<DeviceLEDRing />
|
||||
</template>
|
||||
<script setup>
|
||||
import WIP from '@renderer/components/WIP.vue'
|
||||
import DeviceLEDRing from '@renderer/components/device/DeviceLEDRing.vue'
|
||||
</script>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex px-4 pt-5 pb-3 items-baseline font-heading">
|
||||
<span class="text-lg">{{ $t('preview.title') }}</span>
|
||||
|
||||
<span class="text-zinc-600">(Nano_D++)</span>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div
|
||||
class="flex bg-cover mb-6 w-72 aspect-square"
|
||||
style="background-image: url(../../assets/old/xl-bg-ico.svg)">
|
||||
<div class="flex flex-col w-full justify-center m-9 rounded-full overflow-hidden">
|
||||
<div class="self-center w-8 mb-1 opacity-50">
|
||||
<img src="../../assets/logos/logoMidi.svg" alt="midi-logo">
|
||||
</div>
|
||||
<h2 class="self-center font-pixellg text-5xl ">1337</h2>
|
||||
<div class="self-center font-pixelsm text-md pt-1 pb-2">Profile name</div>
|
||||
<DeviceBar class="self-center" />
|
||||
<span
|
||||
class="self-center text-center w-48 font-pixelsm text-xs text-muted-foreground">
|
||||
Profile description will go here! And hopefully it will be a long one! Much longer than this one! Actually, this is probably long enough. I don't think we need to make it any longer...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import DeviceBar from '@renderer/components/device/DeviceBar.vue'
|
||||
import DeviceBackground from '@renderer/assets/old/xl-bg-ico.svg'
|
||||
</script>
|
||||
@@ -1,76 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import draggable from 'vuedraggable'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const message = [
|
||||
'vue.draggable',
|
||||
'draggable',
|
||||
'component',
|
||||
'for',
|
||||
'vue.js 2.0',
|
||||
'based',
|
||||
'on',
|
||||
'Sortablejs',
|
||||
]
|
||||
|
||||
const list = ref(
|
||||
message.map((name, index) => {
|
||||
return { name, order: index + 1 }
|
||||
}),
|
||||
)
|
||||
|
||||
const dragOptions = ref({
|
||||
animation: 200,
|
||||
group: 'description',
|
||||
disabled: false,
|
||||
ghostClass: 'ghost',
|
||||
})
|
||||
|
||||
const drag = ref(false)
|
||||
|
||||
const sort = () => {
|
||||
console.log('here')
|
||||
list.value = list.value.sort((a, b) => a.order - b.order)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col-2 flex">
|
||||
<button class="btn btn-secondary button" @click="sort">
|
||||
To original order
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="col-6 flex-col">
|
||||
<h3>Transition</h3>
|
||||
<transition-group>
|
||||
<draggable
|
||||
key="dragggable"
|
||||
item-key="name"
|
||||
:list="list"
|
||||
v-bind="dragOptions"
|
||||
@start="drag = true"
|
||||
@end="drag = false"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<li :key="element.name">
|
||||
{{ element.name }}
|
||||
</li>
|
||||
</template>
|
||||
</draggable>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.button {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
opacity: 0.5;
|
||||
background: #c8ebfb;
|
||||
}
|
||||
</style>
|
||||
@@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<ConfigSection
|
||||
:title="$t('config_options.feedback_designer.feedback_type.title')"
|
||||
:icon-component="GaugeCircle">
|
||||
<TabSelect v-model="feedbackType" :options="feedbackTypeOptions" />
|
||||
</ConfigSection>
|
||||
<ConfigSection
|
||||
:title="$t('config_options.feedback_designer.haptic_response.title')"
|
||||
:icon-component="AudioWaveform"
|
||||
:show-toggle="true">
|
||||
<SteppedSlider
|
||||
v-model="feedbackStrength"
|
||||
:label="$t('config_options.feedback_designer.haptic_response.feedback_strength')" />
|
||||
<Separator />
|
||||
<SteppedSlider
|
||||
v-model="bounceBackStrength"
|
||||
:label="$t('config_options.feedback_designer.haptic_response.bounce_back_strength')" />
|
||||
<Separator />
|
||||
<SteppedSlider
|
||||
v-model="outputRampDampening"
|
||||
:label="$t('config_options.feedback_designer.haptic_response.output_ramp_dampening')" />
|
||||
</ConfigSection>
|
||||
<ConfigSection
|
||||
:title="$t('config_options.feedback_designer.auditory_response.title')"
|
||||
:icon-component="AudioLines" :show-toggle="true">
|
||||
<SteppedSlider
|
||||
v-model="auditoryHapticLevel"
|
||||
:label="$t('config_options.feedback_designer.auditory_response.haptic_level')" />
|
||||
<Separator />
|
||||
<SteppedSlider
|
||||
v-model="auditoryMagnitude"
|
||||
:label="$t('config_options.feedback_designer.auditory_response.magnitude')"
|
||||
:max="3"
|
||||
:named-positions="[
|
||||
{value:0, label: 'Faint'},
|
||||
{value:1, label: 'Soft'},
|
||||
{value:2, label: 'Normal'},
|
||||
{value:3, label: 'Loud'}]" />
|
||||
</ConfigSection>
|
||||
</template>
|
||||
<script setup>
|
||||
import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
|
||||
import ConfigSection from '@renderer/components/common/ConfigSection.vue'
|
||||
import SteppedSlider from '@renderer/components/common/SteppedSlider.vue'
|
||||
import { ref } from 'vue'
|
||||
import FdIcon from '@renderer/assets/icons/iconFineDetents.svg'
|
||||
import CdIcon from '@renderer/assets/icons/iconCoarseDetents.svg'
|
||||
import VfIcon from '@renderer/assets/icons/iconViscousRotation.svg'
|
||||
import RcIcon from '@renderer/assets/icons/iconReturnToCenter.svg'
|
||||
import TabSelect from '@renderer/components/common/TabSelect.vue'
|
||||
|
||||
const feedbackType = ref('fineDetents') // TODO: replace with actual value
|
||||
|
||||
const feedbackTypeOptions = {
|
||||
fineDetents: {
|
||||
icon: FdIcon,
|
||||
titleKey: 'config_options.feedback_designer.feedback_type.fine_detents',
|
||||
},
|
||||
coarseDetents: {
|
||||
icon: CdIcon,
|
||||
titleKey: 'config_options.feedback_designer.feedback_type.coarse_detents',
|
||||
},
|
||||
viscousRotation: {
|
||||
icon: VfIcon,
|
||||
titleKey: 'config_options.feedback_designer.feedback_type.viscous_rotation',
|
||||
},
|
||||
returnToCenter: {
|
||||
icon: RcIcon,
|
||||
titleKey: 'config_options.feedback_designer.feedback_type.return_to_center',
|
||||
},
|
||||
}
|
||||
|
||||
const feedbackStrength = ref(2)
|
||||
const bounceBackStrength = ref(2)
|
||||
const outputRampDampening = ref(2)
|
||||
|
||||
const auditoryHapticLevel = ref(2)
|
||||
const auditoryMagnitude = ref(2)
|
||||
|
||||
</script>
|
||||
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<button
|
||||
class="flex-1 flex flex-col items-center py-2"
|
||||
:class="{'text-black bg-zinc-200 hover:bg-zinc-100': selected,
|
||||
'hover:bg-zinc-800 text-muted-foreground' : !selected}"
|
||||
@click="$emit('select'); $refs.title.scramble()">
|
||||
<img
|
||||
draggable="false"
|
||||
:src="icon" alt="connection-type-icon"
|
||||
class="w-16 py-2"
|
||||
:class="{'invert': invert && selected}">
|
||||
<ScrambleText ref="title" :resize="false" class="text-xs text-wrap p-1" :text="title" />
|
||||
<span>
|
||||
<ArrowBigUp class="inline-block" />
|
||||
<Badge
|
||||
class="shadow-none text-wrap inline-block p-0.5 mx-1"
|
||||
:class="{'bg-orange-400': selected, 'bg-zinc-400': !selected}">Space</Badge>+<Badge
|
||||
class="shadow-none text-wrap inline-block p-0.5 mx-1"
|
||||
:class="{'bg-orange-400': selected, 'bg-zinc-400': !selected}">E</Badge>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<script setup>
|
||||
import ScrambleText from '@renderer/components/common/ScrambleText.vue'
|
||||
import { Badge } from '@renderer/components/ui/badge'
|
||||
import { ArrowBigUp } from 'lucide-vue-next'
|
||||
|
||||
defineEmits(['select'])
|
||||
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
icon: {
|
||||
type: [String, Object, Function],
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
invert: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
badge: {
|
||||
type: [String, Object, Function],
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<ConfigSection
|
||||
title="Ring Lights" :icon-component="Lightbulb"
|
||||
:show-toggle="true">
|
||||
<h2 class="p-6 inline-block">{{ $t('config_options.light_designer.led_mode') }}</h2> [TODO]
|
||||
<div class="px-6 py-2">
|
||||
<Slider v-model="brightnessSliderModel" max="100" class="h-10" />
|
||||
</div>
|
||||
</ConfigSection>
|
||||
<ConfigSection
|
||||
title="Key Lights" :icon-component="Lightbulb"
|
||||
:show-toggle="true">
|
||||
<h2 class="p-6 inline-block">{{ $t('config_options.light_designer.led_mode') }}</h2> [TODO]
|
||||
<div class="px-6 py-2">
|
||||
<Slider v-model="brightnessSliderModel" max="100" class="h-10" />
|
||||
</div>
|
||||
</ConfigSection>
|
||||
<ConfigSection title="Ring Colors" :icon-component="Circle">
|
||||
<PaletteInput v-model="ringColors" />
|
||||
</ConfigSection>
|
||||
<ConfigSection title="Key Colors" :icon-component="PanelBottom">
|
||||
<PaletteInput v-model="keyColors" />
|
||||
</ConfigSection>
|
||||
<ConfigSection title="Key Colors (Pressed)" :icon-component="PanelBottomClose">
|
||||
<PaletteInput v-model="keyColors" />
|
||||
</ConfigSection>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Lightbulb, PanelBottomClose, Circle, PanelBottom } from 'lucide-vue-next'
|
||||
import ConfigSection from '@renderer/components/common/ConfigSection.vue'
|
||||
import PaletteInput from '@renderer/components/common/PaletteInput.vue'
|
||||
import Color from 'color'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useStore } from '@renderer/store'
|
||||
import { Slider } from '@renderer/components/ui/slider'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const ledConfig = computed(() => store.selectedProfile.ledConfig)
|
||||
|
||||
const brightnessSliderModel = computed({
|
||||
get: () => [ledConfig.value.ledBrightness],
|
||||
set: (val) => ledConfig.value.ledBrightness = val[0],
|
||||
})
|
||||
|
||||
const ringColors = ref({
|
||||
primary: {
|
||||
key: 'config_options.light_designer.primary_color',
|
||||
color: computed({
|
||||
get: () => Color(ledConfig.value.primary),
|
||||
set: (color) => [ledConfig.value.primary.h, ledConfig.value.primary.s, ledConfig.value.primary.v] = color.hsv().color,
|
||||
}),
|
||||
},
|
||||
secondary: {
|
||||
key: 'config_options.light_designer.secondary_color',
|
||||
color: computed({
|
||||
get: () => Color(ledConfig.value.secondary),
|
||||
set: (color) => [ledConfig.value.secondary.h, ledConfig.value.secondary.s, ledConfig.value.secondary.v] = color.hsv().color,
|
||||
}),
|
||||
},
|
||||
pointer: {
|
||||
key: 'config_options.light_designer.pointer_color',
|
||||
color: computed({
|
||||
get: () => Color(ledConfig.value.pointer),
|
||||
set: (color) => [ledConfig.value.pointer.h, ledConfig.value.pointer.s, ledConfig.value.pointer.v] = color.hsv().color,
|
||||
}),
|
||||
},
|
||||
})
|
||||
|
||||
const keyColors = ref({
|
||||
a: {
|
||||
key: 'a',
|
||||
color: Color('#ff2a7d'),
|
||||
},
|
||||
b: {
|
||||
key: 'b',
|
||||
color: Color('#f32a9c'),
|
||||
},
|
||||
c: {
|
||||
key: 'c',
|
||||
color: Color('#d12ab1'),
|
||||
},
|
||||
d: {
|
||||
key: 'd',
|
||||
color: Color('#a92ac3'),
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -1,130 +0,0 @@
|
||||
<template>
|
||||
<ConfigSection title="Map some stuff idk" :icon-component="Keyboard">
|
||||
<div v-if="false" class="flex font-heading">
|
||||
<KeySelectButton
|
||||
v-for="(option, key) in keySelectOptions" :key="key" :title="$t(option.titleKey)"
|
||||
:invert="option.invert" :badge="option.badge"
|
||||
:icon="option.icon" :selected="selectedKey===key" @select="selectedKey=key" />
|
||||
</div>
|
||||
<Separator />
|
||||
<Command>
|
||||
|
||||
<CommandList>
|
||||
<CommandEmpty>{{ $t('config_options.mapping_configuration.key_mapping.not_found') }}
|
||||
|
||||
</CommandEmpty>
|
||||
<CommandInput
|
||||
:placeholder="$t('config_options.mapping_configuration.key_mapping.search_placeholder')" />
|
||||
<CommandGroup heading="Common">
|
||||
<CommandItem value="backspace">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Backspace
|
||||
</CommandItem>
|
||||
<CommandItem value="delete">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Delete
|
||||
</CommandItem>
|
||||
<CommandItem value="enter">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Enter
|
||||
</CommandItem>
|
||||
<CommandItem value="end">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
End
|
||||
</CommandItem>
|
||||
<CommandItem value="arrow up">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Arrow Up
|
||||
</CommandItem>
|
||||
<CommandItem value="arrow down">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Arrow Down
|
||||
</CommandItem>
|
||||
<CommandItem value="arrow left">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Arrow Left
|
||||
</CommandItem>
|
||||
<CommandItem value="arrow right">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Arrow Right
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
<CommandGroup heading="MIDI Control Changes">
|
||||
<CommandItem value="cc0">
|
||||
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||
Bank Select (CC0)
|
||||
</CommandItem>
|
||||
<CommandItem value="cc2">
|
||||
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||
Modulation (CC1)
|
||||
</CommandItem>
|
||||
<CommandItem value="cc3">
|
||||
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||
Foot Controller (CC4)
|
||||
</CommandItem>
|
||||
<CommandItem value="cc4">
|
||||
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||
Portamento (CC5)
|
||||
</CommandItem>
|
||||
<CommandItem value="cc5">
|
||||
<KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
|
||||
Volume (CC7)
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandGroup heading="Macros">
|
||||
<CommandItem value="Page Scroll">
|
||||
<Squircle color="grey" class="w-4 h-4 mr-2" />
|
||||
Page Scroller (M0)
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
<CommandSeparator />
|
||||
|
||||
</Command>
|
||||
<Separator />
|
||||
</ConfigSection>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList, CommandSeparator,
|
||||
} from '@renderer/components/ui/command'
|
||||
import { KeyboardMusic, Squircle, Keyboard } from 'lucide-vue-next'
|
||||
import ConfigSection from '@renderer/components/common/ConfigSection.vue'
|
||||
import KeyO from '@renderer/assets/icons/iconKeyOrange.svg'
|
||||
import Key from '@renderer/assets/icons/iconKeyWhite.svg'
|
||||
import KeyG from '@renderer/assets/icons/iconKeyGrey.svg'
|
||||
import KeyD from '@renderer/assets/icons/iconKeyDark.svg'
|
||||
import { ref } from 'vue'
|
||||
import KeySelectButton from '@renderer/components/old/KeySelectButton.vue'
|
||||
|
||||
const selectedKey = ref('a') // TODO: replace with actual value
|
||||
|
||||
const keySelectOptions = {
|
||||
a: {
|
||||
icon: KeyO,
|
||||
titleKey: 'config_options.mapping_configuration.key_mapping.switch.a',
|
||||
invert: false,
|
||||
},
|
||||
b: {
|
||||
icon: Key,
|
||||
titleKey: 'config_options.mapping_configuration.key_mapping.switch.b',
|
||||
invert: true,
|
||||
},
|
||||
c: {
|
||||
icon: KeyG,
|
||||
titleKey: 'config_options.mapping_configuration.key_mapping.switch.c',
|
||||
invert: true,
|
||||
},
|
||||
d: {
|
||||
icon: KeyD,
|
||||
titleKey: 'config_options.mapping_configuration.key_mapping.switch.d',
|
||||
invert: true,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,34 +0,0 @@
|
||||
<script setup>
|
||||
import schema from '@renderer/data/profileSchema.json'
|
||||
import axios from 'axios'
|
||||
import { inject, ref } from 'vue'
|
||||
|
||||
const ajv = inject('ajv')
|
||||
|
||||
const message = ref('Waiting...')
|
||||
|
||||
try {
|
||||
const res = await axios.get('http://localhost:3001/profiles/5867')
|
||||
const profiles = res.data
|
||||
console.log(profiles)
|
||||
const validate = ajv.compile(schema)
|
||||
const valid = validate(profiles)
|
||||
if (!valid) {
|
||||
message.value = 'Invalid!'
|
||||
console.log(validate.errors)
|
||||
} else {
|
||||
message.value = 'Valid!'
|
||||
console.log('valid!!!!!!!!!!!!!!!1111elf')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
{{ message }}
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-for="(config, index) in config_tabs"
|
||||
:key="config"
|
||||
:data-selected="current_tab===config.id"
|
||||
class="px-4 h-20 flex items-center hover:bg-zinc-900 data-[selected=true]:bg-zinc-200 hover:data-[selected=true]:bg-zinc-100 data-[selected=true]:text-black border-solid border-0 border-b"
|
||||
:class="config.disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
|
||||
@click="current_tab=config.disabled ? current_tab : config.id; $refs.configSelect[index].scramble()">
|
||||
<div class="w-full">
|
||||
<h1 class="text-lg text-nowrap" :class="{'text-muted-foreground': config.disabled}">
|
||||
<ScrambleText ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" />
|
||||
<Badge
|
||||
v-if="config.hasOwnProperty('badgeKey')"
|
||||
v-t="config.badgeKey"
|
||||
class="font-mono ml-2 rounded-full h-4 align-middle bg-zinc-900 text-muted-foreground" />
|
||||
</h1>
|
||||
<p class="text-xs" :class="current_tab===config.id?'text-black' : 'text-muted-foreground'">
|
||||
{{ $t(`config_options.${config.id}.subtitle`) }}
|
||||
</p>
|
||||
</div>
|
||||
<ChevronRight v-if="current_tab === config.id" class="float-right" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import ScrambleText from '@renderer/components/common/ScrambleText.vue'
|
||||
import { Badge } from '@renderer/components/ui/badge'
|
||||
import { ChevronRight } from 'lucide-vue-next'
|
||||
|
||||
const config_tabs = ref([
|
||||
{ id: 'profile_settings' },
|
||||
{ id: 'feedback_designer' },
|
||||
{ id: 'mapping_configuration' },
|
||||
{ id: 'light_designer' },
|
||||
{
|
||||
id: 'gui_designer',
|
||||
disabled: true,
|
||||
badgeKey: 'common.coming_soon',
|
||||
},
|
||||
{ id: 'dev_playground' },
|
||||
])
|
||||
|
||||
const current_tab = defineModel({
|
||||
type: String,
|
||||
default: 'profile_settings',
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user