UPD: Use config sections
This commit is contained in:
Robert Kossessa
@@ -2,204 +2,163 @@
|
||||
<TabsContent value="haptic-config" class="mt-0">
|
||||
<div class="w-96 bg-zinc-900 bg-opacity-40">
|
||||
<ScrollArea class="h-[720px]">
|
||||
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||
|
||||
<div class="flex-none">
|
||||
<GaugeCircle class="h-4 w-4" />
|
||||
</div>
|
||||
<div class="flex-initial"><h2 class="text-sm px-2 py-4">
|
||||
{{ $t('config_options.feedback_designer.feedback_type.title') }}</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">{{ $t('config_options.feedback_designer.feedback_type.fine_detents')
|
||||
<ConfigSection
|
||||
:title="$t('config_options.feedback_designer.feedback_type.title')"
|
||||
:icon-component="GaugeCircle">
|
||||
<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">{{ $t('config_options.feedback_designer.feedback_type.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">{{ $t('config_options.feedback_designer.feedback_type.coarse_detents')
|
||||
</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">{{ $t('config_options.feedback_designer.feedback_type.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">{{ $t('config_options.feedback_designer.feedback_type.viscous_rotation')
|
||||
</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">{{ $t('config_options.feedback_designer.feedback_type.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">
|
||||
</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') }}
|
||||
</span>
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
</Tabs>
|
||||
</Tabs>
|
||||
|
||||
<Separator />
|
||||
<div class="flex flex-col p-8 pt-4">
|
||||
<Separator />
|
||||
<div class="flex flex-col p-8 pt-4">
|
||||
<span
|
||||
class="text-sm text-muted-foreground font-mono h-8 text-center">{{ $t('config_options.feedback_designer.total_positions')
|
||||
}}</span>
|
||||
|
||||
<div class="flex w-full max-w-sm items-center gap-0">
|
||||
<Button
|
||||
type="submit" class="rounded-none text-xl font-pixellg align-middle font-bold"
|
||||
@click="count--">
|
||||
-
|
||||
</Button>
|
||||
<Input
|
||||
id="positions"
|
||||
v-model="count"
|
||||
class="rounded-none border-none text-5xl font-pixellg focus-visible:ring-0"
|
||||
type="number" placeholder="10" max="65535" min="10" />
|
||||
<Button
|
||||
type="submit" class="rounded-none text-xl font-pixellg font-bold"
|
||||
@click="count++">
|
||||
+
|
||||
</Button>
|
||||
<div class="flex w-full max-w-sm items-center gap-0">
|
||||
<Button
|
||||
type="submit" class="rounded-none text-xl font-pixellg align-middle font-bold"
|
||||
@click="count--">
|
||||
-
|
||||
</Button>
|
||||
<Input
|
||||
id="positions"
|
||||
v-model="count"
|
||||
class="rounded-none border-none text-5xl font-pixellg focus-visible:ring-0"
|
||||
type="number" placeholder="10" max="65535" min="10" />
|
||||
<Button
|
||||
type="submit" class="rounded-none text-xl font-pixellg font-bold"
|
||||
@click="count++">
|
||||
+
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</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">{{ $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">
|
||||
<Separator />
|
||||
</ConfigSection>
|
||||
<ConfigSection
|
||||
:title="$t('config_options.feedback_designer.haptic_response.title')"
|
||||
:icon-component="AudioWaveform"
|
||||
:show-toggle="true">
|
||||
<div class="flex flex-col p-8 pt-4">
|
||||
<span
|
||||
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.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>
|
||||
<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">
|
||||
</div>
|
||||
<Separator />
|
||||
<div class="flex flex-col p-8 pt-4">
|
||||
<span
|
||||
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.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>
|
||||
<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>
|
||||
<Separator />
|
||||
<div class="flex flex-col p-8 pt-4">
|
||||
<Separator />
|
||||
<div class="flex flex-col p-8 pt-4">
|
||||
<span
|
||||
class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.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>
|
||||
<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">
|
||||
{{ $t('config_options.feedback_designer.auditory_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>
|
||||
</ConfigSection>
|
||||
<ConfigSection
|
||||
:title="$t('config_options.feedback_designer.auditory_response.title')"
|
||||
:icon-component="AudioLines" :show-toggle="true">
|
||||
<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.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>
|
||||
</div>
|
||||
<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.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>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</ConfigSection>
|
||||
</ScrollArea>
|
||||
<Separator />
|
||||
|
||||
|
||||
</div>
|
||||
</TabsContent>
|
||||
</template>
|
||||
@@ -207,7 +166,8 @@
|
||||
import { ScrollArea } from '@/components/ui/scroll-area/index.js'
|
||||
import { Tabs } from '@/components/ui/tabs/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>
|
||||
<style scoped>
|
||||
input::-webkit-outer-spin-button,
|
||||
|
||||
@@ -2,191 +2,15 @@
|
||||
<TabsContent value="led-config" class="mt-0">
|
||||
<div class="w-96 bg-zinc-900 bg-opacity-40">
|
||||
<ScrollArea class="h-[720px]">
|
||||
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||
|
||||
<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>
|
||||
<ConfigSection title="TODO: THINK OF TITLE" :icon-component="Lightbulb" />
|
||||
</ScrollArea>
|
||||
<Separator />
|
||||
|
||||
|
||||
</div>
|
||||
</TabsContent>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ScrollArea } from '@/components/ui/scroll-area/index.js'
|
||||
import { Tabs } from '@/components/ui/tabs/index.js'
|
||||
import { Slider } from '@/components/ui/slider/index.js'
|
||||
import { GaugeCircle, AudioLines, AudioWaveform, Power } from 'lucide-vue-next'
|
||||
import { Lightbulb } from 'lucide-vue-next'
|
||||
import ConfigSection from '@/components/config/ConfigSection.vue'
|
||||
</script>
|
||||
<style scoped>
|
||||
input::-webkit-outer-spin-button,
|
||||
|
||||
@@ -2,244 +2,177 @@
|
||||
<TabsContent value="map-config" class="mt-0">
|
||||
<div class="w-96 bg-zinc-900 bg-opacity-40">
|
||||
<ScrollArea class="h-[720px]">
|
||||
<div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
|
||||
|
||||
<div class="flex-none">
|
||||
<Keyboard class="h-4 w-4" />
|
||||
</div>
|
||||
<div class="flex-initial"><h2 class="text-sm px-2 py-4">
|
||||
{{ $t('config_options.mapping_configuration.key_mapping.title') }}</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-key-o.svg">
|
||||
</div>
|
||||
<span class="text-xs leading-3 text-wrap">
|
||||
<ConfigSection :title="$t('config_options.mapping_configuration.key_mapping.title')" :icon-component="Keyboard">
|
||||
<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') }}
|
||||
<Badge class="bg-orange-400 mt-2">Shift</Badge>
|
||||
</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>
|
||||
<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') }}
|
||||
<Badge class="bg-zinc-400 mt-2">Fn1</Badge>
|
||||
</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>
|
||||
<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') }}
|
||||
<Badge class="bg-zinc-400 mt-2">Fn2</Badge>
|
||||
</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>
|
||||
<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') }}
|
||||
<Badge class="bg-zinc-400 mt-2">M0</Badge>
|
||||
</span>
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
</Tabs>
|
||||
</Tabs>
|
||||
|
||||
<Separator />
|
||||
<Command>
|
||||
<Separator />
|
||||
<Command>
|
||||
|
||||
<CommandList>
|
||||
<CommandEmpty>{{ $t('config_options.mapping_configuration.key_mapping.not_found') }}
|
||||
<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>
|
||||
</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 />
|
||||
<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 />
|
||||
</Command>
|
||||
<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 class="grow">
|
||||
<h2 class="text-sm px-2 py-4">{{ $t('config_options.mapping_configuration.knob_mapping.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>
|
||||
<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-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>
|
||||
</ConfigSection>
|
||||
</ScrollArea>
|
||||
<Separator />
|
||||
|
||||
@@ -261,6 +194,7 @@ import {
|
||||
} from '@/components/ui/command/index.js'
|
||||
import { Slider } from '@/components/ui/slider/index.js'
|
||||
import { KeyboardMusic, Squircle, Keyboard, GaugeCircle, AudioLines, Power } from 'lucide-vue-next'
|
||||
import ConfigSection from '@/components/config/ConfigSection.vue'
|
||||
</script>
|
||||
<style scoped>
|
||||
input::-webkit-outer-spin-button,
|
||||
|
||||
Reference in New Issue
Block a user