matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPD: Refactor components

Browse Source
This commit is contained in:
Robert Kossessa
2024-02-04 17:46:26 +01:00
parent 7f85f9986e
commit 5e3f29058f
24 changed files with 120 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/config/ConfigPane.vue
View File

@@ -1,5 +1,15 @@
<template>
<div>
<div v-if="showTabs" class="flex">
<!-- TODO: Remove later if not needed -->
<button
v-for="(option, key) in store.currentConfigPages" :key="key"
class="flex-1 h-12 items-center text-center group px-3 font-heading"
:class="key===store.currentConfigPage ? 'bg-zinc-900': 'hover:bg-zinc-800 text-zinc-200'"
@click="store.setCurrentConfigPage(key)">
{{ $t(option.titleKey) }}
</button>
</div>
<div class="grow overflow-y-auto">
<component :is="store.currentConfigComponent" />
</div>
@@ -9,4 +19,11 @@
import { useStore } from '@/store'
const store = useStore()
defineProps({
showTabs: {
type: Boolean,
default: true,
},
})
</script>

60
src/components/config/ConfigSection.vue
View File

@@ -1,60 +0,0 @@
<template>
<Collapsible v-model:open="collapse" :default-open="true">
<div class="w-full bg-zinc-900 h-12 flex">
<div
class="flex-1 flex items-center px-4"
:class="{'cursor-pointer hover:bg-zinc-800': showToggle}"
@click="toggle = !toggle">
<component :is="iconComponent" v-if="iconComponent" class="h-4 w-4 mr-2" />
<h2 class="text-sm py-4">{{ title }}</h2>
<Switch
v-if="showToggle" :checked="toggle"
class="ml-auto" @click.stop="toggle=!toggle" />
</div>
<CollapsibleTrigger v-if="foldable" class="flex items-center justify-center h-12 aspect-square hover:bg-zinc-800">
<ChevronLeft class="chevrot h-4 w-4 mt-0.5 transition-transform text-muted-foreground" />
</CollapsibleTrigger>
</div>
<CollapsibleContent>
<slot />
</CollapsibleContent>
</Collapsible>
</template>
<script setup>
import { ChevronLeft } from 'lucide-vue-next'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible/index.js'
import { ref } from 'vue'
import { Switch } from '@/components/ui/switch/index.js'
const collapse = ref(true)
const toggle = defineModel({
type: Boolean,
default: true,
})
defineProps({
title: {
type: String,
default: 'MISSING_TITLE',
},
iconComponent: {
type: [String, Object, Function],
default: undefined,
},
showToggle: {
type: Boolean,
default: false,
},
foldable: {
type: Boolean,
default: true,
},
})
</script>
<style scoped>
[data-state=open] > .chevrot {
transform: rotate(-90deg);
}
</style>

307
src/components/config/HSVInput.vue
View File

@@ -1,307 +0,0 @@
<script setup>
import { computed, onBeforeMount, ref, watch } from 'vue'
import Color from 'color'
import { SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
const hueSliderValue = ref(0)
const saturationSliderValue = ref(100)
const valueSliderValue = ref(50)
const hueSliderModel = computed({
get() {
return [hueSliderValue.value]
},
set(hue) {
hueSliderValue.value = hue[0]
color.value = color.value.hue(hue[0])
},
})
const saturationSliderModel = computed({
get() {
return [saturationSliderValue.value]
},
set(saturation) {
saturationSliderValue.value = saturation[0]
color.value = color.value.saturationv(saturation[0])
},
})
const valueSliderModel = computed({
get() {
return [valueSliderValue.value]
},
set(value) {
valueSliderValue.value = value[0]
color.value = color.value.value(value[0])
},
})
const color = defineModel({
type: Color,
default: () => Color.rgb(255, 0, 0),
})
const saturationSliderColor = computed(() => {
return Color.hsv(hueSliderModel.value[0], 100, valueSliderModel.value[0])
})
const valueSliderColor = computed(() => {
return Color.hsv(hueSliderModel.value[0], saturationSliderModel.value[0], 100)
})
const hexInput = ref('FF0000')
const hueInput = ref('000')
const saturationInput = ref('100')
const valueInput = ref('050')
const rInput = ref('255')
const gInput = ref('000')
const bInput = ref('000')
function onSubmitHexInput() {
let input = hexInput.value
if (input[0] !== '#') {
input = '#' + input
}
if (input.match(/^#[0-9A-F]{6}$/i)) {
color.value = Color(input)
} else
shake()
}
function onSubmitHueInput() {
const input = parseInt(hueInput.value)
if (isNaN(input)) {
shake()
return
}
const newHue = Math.max(0, Math.min(input, 360))
if (newHue === color.value.hue()) {
updateInputs()
}
color.value = color.value.hue(newHue)
}
function onSubmitSaturationInput() {
const input = parseInt(saturationInput.value)
if (isNaN(input)) {
shake()
return
}
const newSaturation = Math.max(0, Math.min(input, 100))
if (newSaturation === color.value.saturationv()) {
updateInputs()
}
color.value = color.value.saturationv(newSaturation)
}
function onSubmitValueInput() {
const input = parseInt(valueInput.value)
if (isNaN(input)) {
shake()
return
}
const newValue = Math.max(0, Math.min(input, 100))
if (newValue === color.value.value()) {
updateInputs()
}
color.value = color.value.value(newValue)
}
function onSubmitRGBInput() {
const r = parseInt(rInput.value)
const g = parseInt(gInput.value)
const b = parseInt(bInput.value)
if (isNaN(r) || isNaN(g) || isNaN(b)) {
shake()
return
}
const newColor = Color.rgb(r, g, b)
if (newColor.hex() === color.value.hex()) {
updateInputs()
}
color.value = newColor
}
function updateInputs() {
hexInput.value = color.value.hex().substring(1, 7)
hueInput.value = String(parseInt(color.value.hue())).padStart(3, '0')
saturationInput.value = String(parseInt(color.value.saturationv())).padStart(3, '0')
valueInput.value = String(parseInt(color.value.value())).padStart(3, '0')
rInput.value = String(parseInt(color.value.red())).padStart(3, '0')
gInput.value = String(parseInt(color.value.green())).padStart(3, '0')
bInput.value = String(parseInt(color.value.blue())).padStart(3, '0')
hueSliderValue.value = color.value.hue()
saturationSliderValue.value = color.value.saturationv()
valueSliderValue.value = color.value.value()
}
watch(color, updateInputs)
onBeforeMount(updateInputs)
const colorFieldText = ref(null)
function shake() {
colorFieldText.value.classList.remove('shake')
setTimeout(() => {
colorFieldText.value.classList.add('shake')
}, 5)
}
</script>
<template>
<div>
<div
class="w-full flex p-4 font-heading"
:style="{backgroundColor: `hsl(${color.hue()},${color.saturationl()}%,${color.lightness()}%)`}">
<div
ref="colorFieldText" class="w-full flex opacity-70"
:class="color.lighten(0.37).isLight() ? 'text-black selection:bg-black selection:text-white' : 'selection:bg-white selection:text-black'"
style="transition: color 0.2s ease-in-out">
<div>
<form @submit.prevent="onSubmitHueInput">
<label for="hueInput">H: </label><input
id="hueInput"
v-model="hueInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
<form @submit.prevent="onSubmitSaturationInput">
<label for="saturationInput">S: </label><input
id="saturationInput"
v-model="saturationInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
<form @submit.prevent="onSubmitValueInput">
<label for="valueInput">V: </label><input
id="valueInput"
v-model="valueInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
</div>
<div class="mx-auto">
<form @submit.prevent="onSubmitHexInput">
<label for="hexInput">#</label><input
id="hexInput"
v-model="hexInput" maxlength="6"
onfocus="this.select()"
class="w-16 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
</div>
<div>
<form @submit.prevent="onSubmitRGBInput">
<label for="rInput">R: </label><input
id="rInput"
v-model="rInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
<form @submit.prevent="onSubmitRGBInput">
<label for="gInput">G: </label><input
id="gInput"
v-model="gInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
<form @submit.prevent="onSubmitRGBInput">
<label for="bInput">B: </label><input
id="bInput"
v-model="bInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
</div>
</div>
</div>
<div
class="px-6"
:style="{background: `linear-gradient(180deg, hsla(${color.hue()}, ${color.saturationl()}%, ${color.lightness()}%, 30%) 0%, transparent 30%`}">
<div class="flex pt-4">
<p class="font-heading text-muted-foreground w-24">HUE</p>
<SliderRoot
v-model="hueSliderModel" :max="359"
class="relative flex w-full touch-none select-none items-center h-10">
<SliderTrack
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
style="background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%)" />
<SliderThumb
class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
</SliderRoot>
</div>
<div class="flex pt-4">
<p class="font-heading text-muted-foreground w-24">SAT</p>
<SliderRoot
v-model="saturationSliderModel" :max="100"
class="relative flex w-full touch-none select-none items-center h-10">
<SliderTrack
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
:style="{background: `linear-gradient(90deg, hsl(0, 0%, ${saturationSliderColor.lightness()}%) 0%, hsl(${saturationSliderColor.hue()}, 100%, ${saturationSliderColor.lightness()}%) 100%)`}" />
<SliderThumb
class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
</SliderRoot>
</div>
<div class="flex pt-4">
<p class="font-heading text-muted-foreground w-24">VAL</p>
<SliderRoot
v-model="valueSliderModel" :max="100"
class="relative flex w-full touch-none select-none items-center h-10">
<SliderTrack
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
:style="{background: `linear-gradient(90deg, black, hsl(${valueSliderColor.hue()}, ${valueSliderColor.saturationl()}%, ${valueSliderColor.lightness()}%) 100%`}" />
<SliderThumb
class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
</SliderRoot>
</div>
</div>
</div>
</template>
<style scoped>
.shake {
animation-name: shake;
animation-fill-mode: forwards;
animation-duration: 250ms;
animation-timing-function: ease-in-out;
}
@keyframes shake {
0% {
transform: translateX(0);
}
15% {
transform: translateX(0.1rem);
}
30% {
transform: translateX(-0.1rem);
}
45% {
transform: translateX(0.1rem);
}
60% {
transform: translateX(-0.1rem);
}
75% {
transform: translateX(0.1rem);
}
90% {
transform: translateX(-0.1rem);
}
100% {
transform: translateX(0);
}
}
</style>

47
src/components/config/PaletteInput.vue
View File

@@ -1,47 +0,0 @@
<template>
<div class="flex font-heading">
<button
v-for="(option, key) in options" :key="key"
class="flex-1 pt-2 items-center text-center"
:class="currentOption!==key ? 'hover:bg-zinc-800 text-zinc-200' : 'text-black bg-zinc-200 hover:bg-zinc-100'"
@click="currentOption = key">
{{ $t(option.titleKey) }}
<span class="flex h-4 w-full mt-2" :style="{background: option.color.hex()}" />
</button>
</div>
<HSVInput v-model="options[currentOption].color" class="relative z-20" />
</template>
<script setup>
import HSVInput from '@/components/config/HSVInput.vue'
import Color from 'color'
import { onBeforeMount, reactive, ref } from 'vue'
import TabSelect from '@/components/config/TabSelect.vue'
const currentOption = ref(null)
const model = defineModel({
type: Object,
default: () => ({
one: {
titleKey: 'One',
color: Color('#ff0000'),
},
two: {
titleKey: 'Two',
color: Color('#00ff00'),
},
three: {
titleKey: 'Three',
color: Color('#0000ff'),
},
}),
})
const options = reactive(model.value)
onBeforeMount(() => {
if (currentOption.value === null)
currentOption.value = Object.keys(options)[0]
})
</script>

110
src/components/config/SteppedSlider.vue
View File

@@ -1,110 +0,0 @@
<template>
<div class="flex flex-col px-8 my-4">
<span class="text-sm text-muted-foreground font-mono">{{ label }}</span>
<Slider
ref="steppedSlider" v-model="sliderModelValue" :max="max" :step="1"
class="pt-4" />
<div class="flex justify-between py-2">
<button
v-for="(position, index) in positions" :key="position"
class="min-w-0 text-nowrap group"
:class="{
'slider-start mr-4': index===0,
'slider-center': index > 0 && index < positions.length-1,
'slider-end ml-4': index === positions.length-1}"
@click="value = position.value">
<span
v-if="index===0" class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
:class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600 group-hover:bg-zinc-500'" />
<span
v-if="position.label" class="text-xs font-mono uppercase mx-1 transition-colors"
:class="value===position.value ? 'text-zinc-100' : 'text-zinc-600 group-hover:text-zinc-500'">{{ position.label }}</span>
<span
v-if="!position.label || index === positions.length-1"
class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
:class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600 group-hover:bg-zinc-500'" />
</button>
</div>
</div>
</template>
<script setup>
import { Slider } from '@/components/ui/slider'
import { computed } from 'vue'
const value = defineModel({
type: Number,
default: 0,
})
const sliderModelValue = computed({
get: () => [value.value],
set: (val) => {
value.value = val[0]
},
})
const props = defineProps({
label: {
type: String,
default: null,
},
max: {
type: Number,
default: 4,
},
namedPositions: {
type: Array,
default: () => [
{
label: 'Min',
value: 0,
},
{
value: 2,
},
{
label: 'Max',
value: 4,
},
],
},
autoMarkers: {
type: Boolean,
default: true,
},
})
const positions = computed(() => {
if (props.autoMarkers) {
const filled = []
for (let i = 0; i <= props.max; i++) {
const position = props.namedPositions.find((p) => p.value === i) || { value: i }
filled.push(position)
}
return filled
}
return props.namedPositions
})
</script>
<style scoped>
.slider-start {
text-align: left;
}
.slider-center {
text-align: center;
}
.slider-end {
text-align: right;
}
.slider-start,
.slider-end {
flex: 0.5;
}
.slider-center {
flex: 1;
}
</style>

80
src/components/config/TabSelect.vue
View File

@@ -1,80 +0,0 @@
<template>
<div class="relative">
<div
:style="backgroundStyle"
:class="{'hidden': !showBackground}"
class="absolute bg-zinc-300 outline outline-zinc-100 rounded-xl transition-all duration-75 ease-out" />
<div class="flex font-heading px-4 py-2 gap-2 relative">
<TabSelectButton
v-for="(option, key) in options" :key="key"
:ref="(el) => buttons[key] = el"
:title="$t(option.titleKey)"
:icon="option.icon" :selected="model===key"
@select="model=key">
<template v-if="$slots[key]" #replace>
<slot :name="key" />
</template>
</TabSelectButton>
</div>
</div>
</template>
<script setup>
import { CircleDot } from 'lucide-vue-next'
import TabSelectButton from '@/components/config/TabSelectButton.vue'
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
const model = defineModel({
type: String,
default: 'a',
})
const buttons = ref({})
const showBackground = ref(false)
const backgroundStyle = ref({
top: '0',
left: '0',
width: '0',
height: '0',
})
const updateBackgroundStyle = () => {
const selected = buttons.value[model.value]
if (selected) {
backgroundStyle.value = {
top: `${selected.$el.offsetTop}px`,
left: `${selected.$el.offsetLeft}px`,
width: `${selected.$el.offsetWidth}px`,
height: `${selected.$el.offsetHeight}px`,
}
}
}
watch([model, buttons], () => {
updateBackgroundStyle()
showBackground.value = true
})
let observer = null
onMounted(() => {
observer = new ResizeObserver(updateBackgroundStyle)
observer.observe(buttons.value[model.value].$el)
})
onBeforeUnmount(() => {
observer.disconnect()
})
defineProps({
options: {
type: Object,
default: () => ({
a: { titleKey: 'Option A', icon: CircleDot },
b: { titleKey: 'Option B', icon: CircleDot },
c: { titleKey: 'Option C', icon: CircleDot },
}),
},
})
</script>

37
src/components/config/TabSelectButton.vue
View File

@@ -1,37 +0,0 @@
<template>
<button
class="flex-1 flex flex-col items-center rounded-xl p-1 gap-2 transition-all"
:class="{'text-black bg-zinc-300 outline outline-zinc-100 hover:bg-zinc-200': selected,
'hover:bg-zinc-800 text-muted-foreground' : !selected}"
@click="$emit('select'); $refs.title.scramble()">
<slot v-if="$slots['replace']" name="replace" />
<template v-else>
<img
draggable="false"
:src="icon" alt="connection-type-icon"
class="h-16"
:class="{'invert': selected}">
<ScrambleText ref="title" :resize="false" class="text-xs text-wrap" :text="title" />
</template>
</button>
</template>
<script setup>
import ScrambleText from '@/components/effects/ScrambleText.vue'
defineEmits(['select'])
defineProps({
title: {
type: String,
default: '',
},
icon: {
type: [String, Object, Function],
default: '',
},
selected: {
type: Boolean,
default: false,
},
})
</script>

4
src/components/config/pages/KeyConfig.vue → src/components/config/keys/KeyConfig.vue
View File

@@ -5,8 +5,8 @@
</template>
<script setup>
import { Lightbulb } from 'lucide-vue-next'
import ConfigSection from '@/components/config/ConfigSection.vue'
import PaletteInput from '@/components/config/PaletteInput.vue'
import ConfigSection from '@/components/common/ConfigSection.vue'
import PaletteInput from '@/components/common/PaletteInput.vue'
import Color from 'color'
import { ref } from 'vue'

10
src/components/config/pages/KnobConfig.vue → src/components/config/knob/KnobConfig.vue
View File

@@ -43,16 +43,16 @@
</template>
<script setup>
import { AudioLines, AudioWaveform, GaugeCircle, Lightbulb } from 'lucide-vue-next'
import ConfigSection from '@/components/config/ConfigSection.vue'
import PaletteInput from '@/components/config/PaletteInput.vue'
import ConfigSection from '@/components/common/ConfigSection.vue'
import PaletteInput from '@/components/common/PaletteInput.vue'
import Color from 'color'
import { computed, ref } from 'vue'
import TabSelect from '@/components/config/TabSelect.vue'
import { ref } from 'vue'
import TabSelect from '@/components/common/TabSelect.vue'
import FdIcon from '@/assets/icons/iconFineDetents.svg'
import CdIcon from '@/assets/icons/iconCoarseDetents.svg'
import VfIcon from '@/assets/icons/iconViscousRotation.svg'
import RcIcon from '@/assets/icons/iconReturnToCenter.svg'
import SteppedSlider from '@/components/config/SteppedSlider.vue'
import SteppedSlider from '@/components/common/SteppedSlider.vue'
const feedbackType = ref('fineDetents') // TODO: replace with actual value

4
src/components/config/ConfigSelect.vue → src/components/config/old/ConfigSelect.vue
View File

@@ -22,8 +22,8 @@
</template>
<script setup>
import { ref } from 'vue'
import ScrambleText from '@/components/effects/ScrambleText.vue'
import { Badge } from '@/components/ui/badge/index.js'
import ScrambleText from '@/components/common/ScrambleText.vue'
import { Badge } from '@/components/ui/badge'
import { ChevronRight } from 'lucide-vue-next'
const config_tabs = ref([

0
src/components/config/pages/DevPlayground.vue → src/components/config/old/DevPlayground.vue
View File

6
src/components/config/pages/HapticConfig.vue → src/components/config/old/HapticConfig.vue
View File

@@ -40,14 +40,14 @@
</template>
<script setup>
import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
import ConfigSection from '@/components/config/ConfigSection.vue'
import SteppedSlider from '@/components/config/SteppedSlider.vue'
import ConfigSection from '@/components/common/ConfigSection.vue'
import SteppedSlider from '@/components/common/SteppedSlider.vue'
import { ref } from 'vue'
import FdIcon from '@/assets/icons/iconFineDetents.svg'
import CdIcon from '@/assets/icons/iconCoarseDetents.svg'
import VfIcon from '@/assets/icons/iconViscousRotation.svg'
import RcIcon from '@/assets/icons/iconReturnToCenter.svg'
import TabSelect from '@/components/config/TabSelect.vue'
import TabSelect from '@/components/common/TabSelect.vue'
const feedbackType = ref('fineDetents') // TODO: replace with actual value

2
src/components/config/KeySelectButton.vue → src/components/config/old/KeySelectButton.vue
View File

@@ -21,7 +21,7 @@
</button>
</template>
<script setup>
import ScrambleText from '@/components/effects/ScrambleText.vue'
import ScrambleText from '@/components/common/ScrambleText.vue'
import { Badge } from '@/components/ui/badge'
import { ArrowBigUp } from 'lucide-vue-next'

6
src/components/config/pages/LEDsConfig.vue → src/components/config/old/LEDsConfig.vue
View File

@@ -27,12 +27,12 @@
</template>
<script setup>
import { Lightbulb, PanelBottomClose, Circle, PanelBottom } from 'lucide-vue-next'
import ConfigSection from '@/components/config/ConfigSection.vue'
import PaletteInput from '@/components/config/PaletteInput.vue'
import ConfigSection from '@/components/common/ConfigSection.vue'
import PaletteInput from '@/components/common/PaletteInput.vue'
import Color from 'color'
import { computed, ref } from 'vue'
import { useStore } from '@/store.js'
import { Slider } from '@/components/ui/slider/index.js'
import { Slider } from '@/components/ui/slider'
const store = useStore()

12
src/components/config/pages/MappingConfig.vue → src/components/config/old/MappingConfig.vue
View File

@@ -127,8 +127,8 @@
</ConfigSection>
</template>
<script setup>
import { Badge } from '@/components/ui/badge/index.js'
import { Tabs } from '@/components/ui/tabs/index.js'
import { Badge } from '@/components/ui/badge'
import { Tabs } from '@/components/ui/tabs'
import {
Command,
CommandEmpty,
@@ -136,16 +136,16 @@ import {
CommandInput,
CommandItem,
CommandList, CommandSeparator,
} from '@/components/ui/command/index.js'
import { Slider } from '@/components/ui/slider/index.js'
} from '@/components/ui/command'
import { Slider } from '@/components/ui/slider'
import { KeyboardMusic, Squircle, Keyboard, GaugeCircle, Play, Pause } from 'lucide-vue-next'
import ConfigSection from '@/components/config/ConfigSection.vue'
import ConfigSection from '@/components/common/ConfigSection.vue'
import KeyO from '@/assets/icons/iconKeyOrange.svg'
import Key from '@/assets/icons/iconKeyWhite.svg'
import KeyG from '@/assets/icons/iconKeyGrey.svg'
import KeyD from '@/assets/icons/iconKeyDark.svg'
import { ref } from 'vue'
import KeySelectButton from '@/components/config/KeySelectButton.vue'
import KeySelectButton from '@/components/config/old/KeySelectButton.vue'
const selectedKey = ref('a') // TODO: replace with actual value

51
src/components/config/pages/ProfileConfig.vue
View File

@@ -1,51 +0,0 @@
<template>
<ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
<WIP />
</ConfigSection>
<ConfigSection
v-if="false" :title="$t('config_options.profile_settings.connection_type.title')"
:icon-component="Cable">
<!-- TODO: Remove later if not needed -->
<TabSelect v-model="connectionType" :options="connectionTypeOptions" />
</ConfigSection>
<ConfigSection
:title="$t('config_options.profile_settings.internal_profile_toggle.title')"
:icon-component="Replace" :show-toggle="true">
<p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
{{ $t('config_options.profile_settings.internal_profile_toggle.subtitle') }}
<Separator class="mt-4" />
<span class="py-4 space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
}}:<br>
<Badge class="bg-orange-500">SHIFT</Badge> + <Badge
class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
<Separator />
<span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
</p>
</ConfigSection>
</template>
<script setup>
import { Cable, Replace, Type } from 'lucide-vue-next'
import ConfigSection from '@/components/config/ConfigSection.vue'
import { Separator } from '@/components/ui/separator/index.js'
import { ref } from 'vue'
import UsbIcon from '@/assets/logos/logoUsb.svg'
import MidiIcon from '@/assets/logos/logoMidi.svg'
import { Badge } from '@/components/ui/badge'
import WIP from '@/components/WIP.vue'
import TabSelect from '@/components/config/TabSelect.vue'
const connectionType = ref('usb') // TODO: replace with actual value
const connectionTypeOptions = {
usb: {
icon: UsbIcon,
titleKey: 'config_options.profile_settings.connection_type.usb',
},
midi: {
icon: MidiIcon,
titleKey: 'config_options.profile_settings.connection_type.midi',
},
}
</script>