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

UPD: Use config sections

Browse Source
This commit is contained in:
Robert Kossessa
2024-01-25 02:25:57 +01:00
parent d03f90df2d
commit 7d81a5316c
3 changed files with 275 additions and 557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
src/components/config/pages/HapticConfig.vue
View File

@@ -2,204 +2,163 @@
<TabsContent value="haptic-config" class="mt-0"> <TabsContent value="haptic-config" class="mt-0">
<div class="w-96 bg-zinc-900 bg-opacity-40"> <div class="w-96 bg-zinc-900 bg-opacity-40">
<ScrollArea class="h-[720px]"> <ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900"> <ConfigSection
:title="$t('config_options.feedback_designer.feedback_type.title')"
<div class="flex-none"> :icon-component="GaugeCircle">
<GaugeCircle class="h-4 w-4" /> <Tabs default-value="fd">
</div> <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
<div class="flex-initial"><h2 class="text-sm px-2 py-4"> <TabsTrigger value="fd">
{{ $t('config_options.feedback_designer.feedback_type.title') }}</h2></div> <div class="grid grid-flow-row auto-rows-max justify-items-center ">
<div class="size-16 mb-2">
</div> <img src="../../../assets/gui-ico/ico-fd.svg">
<Separator /> </div>
<span
<Tabs default-value="fd"> class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.fine_detents')
<TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
<TabsTrigger value="fd">
<div class="grid grid-flow-row auto-rows-max justify-items-center ">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-fd.svg">
</div>
<span
class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.fine_detents')
}}</span> }}</span>
</div>
</TabsTrigger>
<TabsTrigger value="cd">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-cd.svg">
</div> </div>
<span </TabsTrigger>
class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.coarse_detents') <TabsTrigger value="cd">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-cd.svg">
</div>
<span
class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.coarse_detents')
}}</span> }}</span>
</div>
</TabsTrigger>
<TabsTrigger value="vr">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-vf.svg">
</div> </div>
<span </TabsTrigger>
class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.viscous_rotation') <TabsTrigger value="vr">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-vf.svg">
</div>
<span
class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.viscous_rotation')
}}</span> }}</span>
</div>
</TabsTrigger>
<TabsTrigger value="rt">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-rc.svg">
</div> </div>
<span class="text-xs leading-3 text-wrap"> </TabsTrigger>
<TabsTrigger value="rt">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-rc.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.feedback_designer.feedback_type.return_to_center') }} {{ $t('config_options.feedback_designer.feedback_type.return_to_center') }}
</span> </span>
</div> </div>
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
</Tabs> </Tabs>
<Separator /> <Separator />
<div class="flex flex-col p-8 pt-4"> <div class="flex flex-col p-8 pt-4">
<span <span
class="text-sm text-muted-foreground font-mono h-8 text-center">{{ $t('config_options.feedback_designer.total_positions') class="text-sm text-muted-foreground font-mono h-8 text-center">{{ $t('config_options.feedback_designer.total_positions')
}}</span> }}</span>
<div class="flex w-full max-w-sm items-center gap-0"> <div class="flex w-full max-w-sm items-center gap-0">
<Button <Button
type="submit" class="rounded-none text-xl font-pixellg align-middle font-bold" type="submit" class="rounded-none text-xl font-pixellg align-middle font-bold"
@click="count--"> @click="count--">
- -
</Button> </Button>
<Input <Input
id="positions" id="positions"
v-model="count" v-model="count"
class="rounded-none border-none text-5xl font-pixellg focus-visible:ring-0" class="rounded-none border-none text-5xl font-pixellg focus-visible:ring-0"
type="number" placeholder="10" max="65535" min="10" /> type="number" placeholder="10" max="65535" min="10" />
<Button <Button
type="submit" class="rounded-none text-xl font-pixellg font-bold" type="submit" class="rounded-none text-xl font-pixellg font-bold"
@click="count++"> @click="count++">
+ +
</Button> </Button>
</div>
</div> </div>
<Separator />
</div> </ConfigSection>
<Separator /> <ConfigSection
:title="$t('config_options.feedback_designer.haptic_response.title')"
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900"> :icon-component="AudioWaveform"
:show-toggle="true">
<div class="flex-none"> <div class="flex flex-col p-8 pt-4">
<AudioWaveform class="h-4 w-4" />
</div>
<div class="grow">
<h2 class="text-sm px-2 py-4">{{ $t('config_options.feedback_designer.haptic_response.title')
}}</h2>
</div>
<div class="flex-none">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" :default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span <span
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.feedback_strength') class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.feedback_strength')
}}</span> }}</span>
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" /> <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5"> <div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div> <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div> <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div> <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div> <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div> <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div> </div>
</div> </div>
<Separator /> <Separator />
<div class="flex flex-col p-8 pt-4"> <div class="flex flex-col p-8 pt-4">
<span <span
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.bounce_back_strength') class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.bounce_back_strength')
}}</span> }}</span>
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" /> <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5"> <div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div> <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div> <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div> <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div> <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div> <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div>
</div> </div>
</div> <Separator />
<Separator /> <div class="flex flex-col p-8 pt-4">
<div class="flex flex-col p-8 pt-4">
<span <span
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.output_ramp_dampening') class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.output_ramp_dampening')
}}</span> }}</span>
<Slider :default-value="[4]" :max="4" :step="1" class="pt-4" /> <Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5"> <div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div> <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div> <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div> <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div> <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div> <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div> </div>
</div>
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<AudioLines class="h-4 w-4" />
</div> </div>
<div class="grow"><h2 class="text-sm px-2 py-4"> </ConfigSection>
{{ $t('config_options.feedback_designer.auditory_response.title') }}</h2></div> <ConfigSection
<div class="flex-none"> :title="$t('config_options.feedback_designer.auditory_response.title')"
<Toggle :icon-component="AudioLines" :show-toggle="true">
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" <div class="flex flex-col p-8 pt-4">
size="sm" :default-value="true" aria-label="EnablePrimary"> <span
<Power class="w-4 h-4" /> class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.auditory_response.haptic_level')
</Toggle> }}</span>
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div>
</div> </div>
</div> <Separator />
<Separator /> <div class="flex flex-col p-8 pt-4">
<div class="flex flex-col p-8 pt-4"> <span
<span class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.auditory_response.magnitude')
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.auditory_response.haptic_level') }}</span>
}}</span> <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" /> <div class="flex flex-row px-1 py-1.5">
<div class="flex flex-row px-1 py-1.5"> <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div> <div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div> <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div> <div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div> <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div> </div>
</div> </div>
</div> </ConfigSection>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.auditory_response.magnitude')
}}</span>
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
</div>
</div>
</ScrollArea> </ScrollArea>
<Separator /> <Separator />
</div> </div>
</TabsContent> </TabsContent>
</template> </template>
@@ -207,7 +166,8 @@
import { ScrollArea } from '@/components/ui/scroll-area/index.js' import { ScrollArea } from '@/components/ui/scroll-area/index.js'
import { Tabs } from '@/components/ui/tabs/index.js' import { Tabs } from '@/components/ui/tabs/index.js'
import { Slider } from '@/components/ui/slider/index.js' import { Slider } from '@/components/ui/slider/index.js'
import { GaugeCircle, AudioLines, AudioWaveform, Power } from 'lucide-vue-next' import { GaugeCircle, AudioLines, AudioWaveform } from 'lucide-vue-next'
import ConfigSection from '@/components/config/ConfigSection.vue'
</script> </script>
<style scoped> <style scoped>
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,

182
src/components/config/pages/LEDsConfig.vue
View File

@@ -2,191 +2,15 @@
<TabsContent value="led-config" class="mt-0"> <TabsContent value="led-config" class="mt-0">
<div class="w-96 bg-zinc-900 bg-opacity-40"> <div class="w-96 bg-zinc-900 bg-opacity-40">
<ScrollArea class="h-[720px]"> <ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900"> <ConfigSection title="TODO: THINK OF TITLE" :icon-component="Lightbulb" />
<div class="flex-none">
<GaugeCircle class="h-4 w-4" />
</div>
<div class="flex-initial"><h2 class="text-sm px-2 py-4">Feedback Type</h2></div>
</div>
<Separator />
<Tabs default-value="fd">
<TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
<TabsTrigger value="fd">
<div class="grid grid-flow-row auto-rows-max justify-items-center ">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-fd.svg">
</div>
<span class="text-xs leading-3 text-wrap">
Fine Detents
</span>
</div>
</TabsTrigger>
<TabsTrigger value="cd">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-cd.svg">
</div>
<span class="text-xs leading-3 text-wrap">
Coarse Detents
</span>
</div>
</TabsTrigger>
<TabsTrigger value="vr">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-vf.svg">
</div>
<span class="text-xs leading-3 text-wrap">
Viscous Rotation
</span>
</div>
</TabsTrigger>
<TabsTrigger value="rt">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-rc.svg">
</div>
<span class="text-xs leading-3 text-wrap">
Return to Center
</span>
</div>
</TabsTrigger>
</TabsList>
</Tabs>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono h-8 text-center">Total Positions</span>
<div class="flex w-full max-w-sm items-center gap-0">
<Button type="submit" class="rounded-l-full text-xl font-mono align-middle font-bold">
-
</Button>
<Input
id="positions" class="rounded-none text-xl font-pixellg" type="number" placeholder="10"
default-value="60" max="65535" min="10" />
<Button type="submit" class="rounded-r-full text-xl font-mono font-bold">
+
</Button>
</div>
</div>
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<AudioWaveform class="h-4 w-4" />
</div>
<div class="grow">
<h2 class="text-sm px-2 py-4">Haptic Response</h2>
</div>
<div class="flex-none">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" :default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
<Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div>
</div>
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<AudioLines class="h-4 w-4" />
</div>
<div class="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
<div class="flex-none">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" :default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono">Auditory Haptic Level</span>
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono">Auditory Magnitude</span>
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
</div>
</div>
</ScrollArea> </ScrollArea>
<Separator />
</div> </div>
</TabsContent> </TabsContent>
</template> </template>
<script setup> <script setup>
import { ScrollArea } from '@/components/ui/scroll-area/index.js' import { ScrollArea } from '@/components/ui/scroll-area/index.js'
import { Tabs } from '@/components/ui/tabs/index.js' import { Lightbulb } from 'lucide-vue-next'
import { Slider } from '@/components/ui/slider/index.js' import ConfigSection from '@/components/config/ConfigSection.vue'
import { GaugeCircle, AudioLines, AudioWaveform, Power } from 'lucide-vue-next'
</script> </script>
<style scoped> <style scoped>
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,

356
src/components/config/pages/MappingConfig.vue
View File

@@ -2,244 +2,177 @@
<TabsContent value="map-config" class="mt-0"> <TabsContent value="map-config" class="mt-0">
<div class="w-96 bg-zinc-900 bg-opacity-40"> <div class="w-96 bg-zinc-900 bg-opacity-40">
<ScrollArea class="h-[720px]"> <ScrollArea class="h-[720px]">
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900"> <ConfigSection :title="$t('config_options.mapping_configuration.key_mapping.title')" :icon-component="Keyboard">
<Tabs default-value="fd">
<div class="flex-none"> <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
<Keyboard class="h-4 w-4" /> <TabsTrigger value="fd">
</div> <div class="grid grid-flow-row auto-rows-max justify-items-center ">
<div class="flex-initial"><h2 class="text-sm px-2 py-4"> <div class="size-16 mb-2">
{{ $t('config_options.mapping_configuration.key_mapping.title') }}</h2></div> <img src="../../../assets/gui-ico/ico-key-o.svg">
</div>
</div> <span class="text-xs leading-3 text-wrap">
<Separator />
<Tabs default-value="fd">
<TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
<TabsTrigger value="fd">
<div class="grid grid-flow-row auto-rows-max justify-items-center ">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-key-o.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.mapping_configuration.key_mapping.switch.a') }} {{ $t('config_options.mapping_configuration.key_mapping.switch.a') }}
<Badge class="bg-orange-400 mt-2">Shift</Badge> <Badge class="bg-orange-400 mt-2">Shift</Badge>
</span> </span>
</div>
</TabsTrigger>
<TabsTrigger value="cd">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-key.svg">
</div> </div>
<span class="text-xs leading-3 text-wrap"> </TabsTrigger>
<TabsTrigger value="cd">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-key.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.mapping_configuration.key_mapping.switch.b') }} {{ $t('config_options.mapping_configuration.key_mapping.switch.b') }}
<Badge class="bg-zinc-400 mt-2">Fn1</Badge> <Badge class="bg-zinc-400 mt-2">Fn1</Badge>
</span> </span>
</div>
</TabsTrigger>
<TabsTrigger value="vr">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-key-g.svg">
</div> </div>
<span class="text-xs leading-3 text-wrap"> </TabsTrigger>
<TabsTrigger value="vr">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-key-g.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.mapping_configuration.key_mapping.switch.c') }} {{ $t('config_options.mapping_configuration.key_mapping.switch.c') }}
<Badge class="bg-zinc-400 mt-2">Fn2</Badge> <Badge class="bg-zinc-400 mt-2">Fn2</Badge>
</span> </span>
</div>
</TabsTrigger>
<TabsTrigger value="rt">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-key-d.svg">
</div> </div>
<span class="text-xs leading-3 text-wrap"> </TabsTrigger>
<TabsTrigger value="rt">
<div class="grid grid-flow-row auto-rows-max justify-items-center">
<div class="size-16 mb-2">
<img src="../../../assets/gui-ico/ico-key-d.svg">
</div>
<span class="text-xs leading-3 text-wrap">
{{ $t('config_options.mapping_configuration.key_mapping.switch.d') }} {{ $t('config_options.mapping_configuration.key_mapping.switch.d') }}
<Badge class="bg-zinc-400 mt-2">M0</Badge> <Badge class="bg-zinc-400 mt-2">M0</Badge>
</span> </span>
</div> </div>
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
</Tabs> </Tabs>
<Separator /> <Separator />
<Command> <Command>
<CommandList> <CommandList>
<CommandEmpty>{{ $t('config_options.mapping_configuration.key_mapping.not_found') }} <CommandEmpty>{{ $t('config_options.mapping_configuration.key_mapping.not_found') }}
</CommandEmpty> </CommandEmpty>
<CommandInput <CommandInput
:placeholder="$t('config_options.mapping_configuration.key_mapping.search_placeholder')" /> :placeholder="$t('config_options.mapping_configuration.key_mapping.search_placeholder')" />
<CommandGroup heading="Common"> <CommandGroup heading="Common">
<CommandItem value="backspace"> <CommandItem value="backspace">
<Squircle color="grey" class="w-4 h-4 mr-2" /> <Squircle color="grey" class="w-4 h-4 mr-2" />
Backspace Backspace
</CommandItem> </CommandItem>
<CommandItem value="delete"> <CommandItem value="delete">
<Squircle color="grey" class="w-4 h-4 mr-2" /> <Squircle color="grey" class="w-4 h-4 mr-2" />
Delete Delete
</CommandItem> </CommandItem>
<CommandItem value="enter"> <CommandItem value="enter">
<Squircle color="grey" class="w-4 h-4 mr-2" /> <Squircle color="grey" class="w-4 h-4 mr-2" />
Enter Enter
</CommandItem> </CommandItem>
<CommandItem value="end"> <CommandItem value="end">
<Squircle color="grey" class="w-4 h-4 mr-2" /> <Squircle color="grey" class="w-4 h-4 mr-2" />
End End
</CommandItem> </CommandItem>
<CommandItem value="arrow up"> <CommandItem value="arrow up">
<Squircle color="grey" class="w-4 h-4 mr-2" /> <Squircle color="grey" class="w-4 h-4 mr-2" />
Arrow Up Arrow Up
</CommandItem> </CommandItem>
<CommandItem value="arrow down"> <CommandItem value="arrow down">
<Squircle color="grey" class="w-4 h-4 mr-2" /> <Squircle color="grey" class="w-4 h-4 mr-2" />
Arrow Down Arrow Down
</CommandItem> </CommandItem>
<CommandItem value="arrow left"> <CommandItem value="arrow left">
<Squircle color="grey" class="w-4 h-4 mr-2" /> <Squircle color="grey" class="w-4 h-4 mr-2" />
Arrow Left Arrow Left
</CommandItem> </CommandItem>
<CommandItem value="arrow right"> <CommandItem value="arrow right">
<Squircle color="grey" class="w-4 h-4 mr-2" /> <Squircle color="grey" class="w-4 h-4 mr-2" />
Arrow Right Arrow Right
</CommandItem> </CommandItem>
</CommandGroup> </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 /> <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> </Command>
<Separator /> <Separator />
</ConfigSection>
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900"> <ConfigSection
:title="$t('config_options.mapping_configuration.knob_mapping.title')"
:icon-component="GaugeCircle">
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div>
<div class="flex-none">
<GaugeCircle class="h-4 w-4" />
</div> </div>
<div class="grow"> <Separator />
<h2 class="text-sm px-2 py-4">{{ $t('config_options.mapping_configuration.knob_mapping.title') <div class="flex flex-col p-8 pt-4">
}}</h2> <span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
</div> <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<div class="flex-none"> <div class="flex flex-row px-1 py-1.5">
<Toggle <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
size="sm" :default-value="true" aria-label="EnablePrimary"> <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<Power class="w-4 h-4" /> <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
</Toggle> <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div>
</div> </div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
<Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div> </div>
</ConfigSection>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
<Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div>
</div>
<Separator />
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
<div class="flex-none">
<AudioLines class="h-4 w-4" />
</div>
<div class="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
<div class="flex-none">
<Toggle
class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
size="sm" :default-value="true" aria-label="EnablePrimary">
<Power class="w-4 h-4" />
</Toggle>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono">Auditory Haptic Level</span>
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
</div>
</div>
<Separator />
<div class="flex flex-col p-8 pt-4">
<span class="text-sm text-muted-foreground font-mono">Auditory Magnitude</span>
<Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
<div class="flex flex-row px-1 py-1.5">
<div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
<div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
<div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
</div>
</div>
</ScrollArea> </ScrollArea>
<Separator /> <Separator />
@@ -261,6 +194,7 @@ import {
} from '@/components/ui/command/index.js' } from '@/components/ui/command/index.js'
import { Slider } from '@/components/ui/slider/index.js' import { Slider } from '@/components/ui/slider/index.js'
import { KeyboardMusic, Squircle, Keyboard, GaugeCircle, AudioLines, Power } from 'lucide-vue-next' import { KeyboardMusic, Squircle, Keyboard, GaugeCircle, AudioLines, Power } from 'lucide-vue-next'
import ConfigSection from '@/components/config/ConfigSection.vue'
</script> </script>
<style scoped> <style scoped>
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,