ADD: Vue-based devgui slider

src/components/device-gui/PixelBarTest.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { Input } from '@/components/ui/input'
+
+const width = ref(160)
+const count = ref(40)
+const percent = ref(60)
+const gap_width = ref(2)
+
+const show_controls = ref(true)
+
+const rect_width = computed(() => {
+  return (width.value - ((count.value + 1) * gap_width.value)) / (count.value)
+})
+const current_pos = computed(() => {
+  return Math.round((percent.value / 100) * count.value)
+})
+</script>
+
+<template>
+  <div class="flex-1 flex flex-col justify-center items-center my-2">
+    {{ current_pos }}
+    <svg xmlns="http://www.w3.org/2000/svg" :width="width+12" height="16">
+      <g>
+        <rect
+          v-for="(_, i) in count"
+          :key="`key${i}`"
+          :style="`fill:${i < current_pos ? '#fff' : '#4a4a4a'}`"
+          :width="rect_width"
+          :height="i===0 || i===count-1 ? 8 : 5"
+          :x="6+gap_width+i*(rect_width+gap_width)"
+          y="0" />
+        <g :transform="`translate(${6+(rect_width+gap_width)*current_pos},0)`">
+          <rect
+            style="fill:#000"
+            :width="6"
+            height="13"
+            x="0"
+            y="0"
+          />
+          <rect
+            style="fill:#c66936"
+            :width="2"
+            height="11"
+            :x="2"
+            y="0"
+          />
+          <rect
+            style="fill:#c66936"
+            :width="2"
+            :height="2"
+            x="0"
+            y="11"
+          />
+          <rect
+            style="fill:#c66936"
+            :width="2"
+            :height="2"
+            :x="4"
+            y="11"
+          />
+        </g>
+      </g>
+    </svg>
+    <div v-if="show_controls  ">
+      <Input v-model="percent" type="number" placeholder="Fill" class="m-2" />
+      <Input v-model="count" type="number" placeholder="Count" class="m-2" />
+      <Input v-model="width" type="number" placeholder="Width" class="m-2" />
+    </div>
+  </div>
+</template>

src/components/patterns/Pop.vue

@@ -12,17 +12,20 @@ import {
   CommandShortcut,
 } from '@/components/ui/command'
 import { Input } from '@/components/ui/input'
+import PixelBarTest from '@/components/device-gui/PixelBarTest.vue'
 </script>
 
 <template>
 
+  <PixelBarTest />
+
   <input
     v-model="defaultName"
     type="text"
     aria-label="Add Profile"
     placeholder="add Profile"
     @keyup.enter="addNewProfile"
-  />
+  >
   <Command>
 
     <CommandList>

src/components/patterns/QuickPreview.vue

@@ -6,15 +6,17 @@
   <div class="flex self-center bg-cover w-72 h-72 mb-7" style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
     <div v-if="profiles" class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
       <div class="self-center w-8 mb-1 opacity-50">
-        <img src="@/assets/gui-ico/ico-midi-logo.svg" />
+        <img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo" />
       </div>
-      <h2 v-for="feedbackConfig in profiles" class="self-center font-pixellg text-5xl ">{{ feedbackConfig.pos }}</h2>
+      <h2 v-for="feedbackConfig in profiles" :key="feedbackConfig" class="self-center font-pixellg text-5xl ">
+        {{ feedbackConfig.pos }}</h2>
 
       <div class="self-center font-pixelsm text-md pt-1 pb-2">{{ profiles.name }}</div>
       <div id="scales" class="flex self-center text-xs py-0"></div>
 
       <div
         v-for="profileConfig in profiles"
+        :key="profileConfig"
         class="self-center text-center text-muted-foreground font-pixelsm text-xs pt-0.5 w-40">
         {{ profileConfig.profileDesc }}
       </div>