feat: select, vector and slider labels with icons

src/components/SelectControl.test.ts

@@ -91,4 +91,24 @@ describe('Dropdown Control', async () => {
 
     expect(wrapper.vm.visible).toBe(false)
   })
+  it('should render an icon instead of a label', () => {
+    dispose();
+    mountComponent(() => {
+      const { visible } = useControls({  
+        test: {
+          label: 'Games',
+          options: [
+            { text: 'Crash Bandicoot', value: 'crash-bandicoot' },
+            { text: 'Spyro The Dragon', value: 'spyro-the-dragon' },
+            { text: 'Metal Gear Solid', value: 'metal-gear-solid' }],
+          value: 'crash-bandicoot',
+          icon: 'i-carbon-checkmark',
+        }
+      });
+      return { visible };
+    });
+    const icon = wrapper.find('i.i-carbon-checkmark');
+    expect(icon.exists()).toBe(true);
+  })
+
 })

src/components/SelectControl.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Control } from '../types'
+import ControlLabel from './ControlLabel.vue'
 
 defineProps<{
   label: string
@@ -15,10 +16,10 @@ function onChange(event: Event) {
 
 <template>
   <div class="flex px-4 justify-between gap-4 items-center mb-2 min-h-32px">
-    <label
-      class="text-gray-500 w-1/3"
-      :for="control.uniqueKey"
-    >{{ label }}</label>
+    <ControlLabel
+      :label="label"
+      :control="control"
+    />
     <select
       :id="control.uniqueKey"
       :value="control.value"

src/components/SliderControl.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watch } from 'vue'
 import { useMouse } from '@vueuse/core'
 import type { Control } from '../types'
+import ControlLabel from './ControlLabel.vue'
 
 const props = defineProps<{
   label: string
@@ -63,10 +64,10 @@ watch(mouse.x, (newValue) => {
 
 <template>
   <div class="px-4 relative flex justify-between gap-4 items-center mb-2">
-    <label
-      class="text-gray-500 w-1/3"
-      :class="{ 'flex justify-between items-center': control.icon }"
-    >{{ label }} <i :class="`i-${control.icon}`" /></label>
+    <ControlLabel
+      :label="label"
+      :control="control"
+    />
     <input
       :value="control.value"
       class="w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none"

src/components/VectorControl.test.ts

@@ -78,4 +78,18 @@ describe('Vector Control', async () => {
     expect(wrapper.vm.position.z).toBe(-1)
   })
   // TODO: mouseDown
+  it('should render an icon instead of a label', () => {
+    dispose();
+    mountComponent(() => {
+      const { visible } = useControls({  
+        test: {
+          value: new Vector3(0, 2, 4),
+          icon: 'i-carbon-checkmark',
+        }
+      });
+      return { visible };
+    });
+    const icon = wrapper.find('i.i-carbon-checkmark');
+    expect(icon.exists()).toBe(true);
+  })
 })

src/components/VectorControl.vue

@@ -3,6 +3,7 @@ import { useKeyModifier, useMouse, useMousePressed } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { isVector2, isVector3, normalizeVectorFlexibleParam } from '../utils/'
 import type { Control } from '../types'
+import ControlLabel from './ControlLabel.vue'
 
 const props = defineProps<{
   label: string
@@ -110,7 +111,10 @@ watch(mouse.x, (newValue) => {
     class="flex px-4 justify-between gap-1 items-center mb-2"
     @mouseup="onControlMouseUp()"
   >
-    <label class="text-gray-500 w-1/3">{{ label }}</label>
+    <ControlLabel
+      :label="label"
+      :control="control"
+    />
     <div class="relative w-2/3 flex justify-between gap-0.5">
       <div
         v-for="(_subcontrol, $index) in vector"

src/components/__snapshots__/Folder.test.ts.snap

@@ -10,7 +10,7 @@ exports[`Folder Controls > should render controls within a folder 1`] = `
     <div class=\\"mb-4\\"><button class=\\"flex items-center justify-between w-full py-2 px-4 bg-gray-100 border-none text-gray-400 font-bold text-xs font-sans cursor-pointer\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"button\\" data-folder=\\"camera\\" tabindex=\\"0\\"><span>camera</span><i class=\\"i-ic:baseline-keyboard-arrow-down\\"></i></button>
       <transition-stub name=\\"slide\\" enteractiveclass=\\" animate-fade-in animate-duration-200 animate-ease-in-out\\" leaveactiveclass=\\" animate-fade-out animate-duration-200 animate-ease-in-out\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
         <div class=\\"bg-white rounded-b pt-4\\" role=\\"menu\\" style=\\"display: none;\\">
-          <div class=\\"flex px-4 justify-between gap-1 items-center mb-2\\"><label class=\\"text-gray-500 w-1/3\\">position</label>
+          <div class=\\"flex px-4 justify-between gap-1 items-center mb-2\\"><label for=\\"cameraPosition\\" title=\\"position\\" class=\\"text-gray-500 w-1/3 truncate\\">position</label>
             <div class=\\"relative w-2/3 flex justify-between gap-0.5\\">
               <div class=\\"flex items-center bg-gray-100 rounded w-1/3 w-1/2\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">x</span><input id=\\"cameraPosition-x\\" type=\\"number\\" step=\\"1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>
               <div class=\\"flex items-center bg-gray-100 rounded w-1/3 w-1/2\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">y</span><input id=\\"cameraPosition-y\\" type=\\"number\\" step=\\"1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>

src/components/__snapshots__/SelectControl.test.ts.snap

@@ -8,7 +8,7 @@ exports[`Dropdown Control > should render a select control 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px\\"><label class=\\"text-gray-500 w-1/3\\">Games</label><select class=\\"p-2 w-2/3 rounded text-left text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans\\">
+    <div class=\\"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px\\"><label title=\\"Games\\" class=\\"text-gray-500 w-1/3 truncate\\">Games</label><select class=\\"p-2 w-2/3 rounded text-left text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans\\">
         <option value=\\"crash-bandicoot\\">Crash Bandicoot</option>
         <option value=\\"spyro-the-dragon\\">Spyro The Dragon</option>
         <option value=\\"metal-gear-solid\\">Metal Gear Solid</option>

src/components/__snapshots__/VectorControl.test.ts.snap

@@ -8,7 +8,7 @@ exports[`Vector Control > should render multiple numeric inputs 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"flex px-4 justify-between gap-1 items-center mb-2\\"><label class=\\"text-gray-500 w-1/3\\">position</label>
+    <div class=\\"flex px-4 justify-between gap-1 items-center mb-2\\"><label for=\\"position\\" title=\\"position\\" class=\\"text-gray-500 w-1/3 truncate\\">position</label>
       <div class=\\"relative w-2/3 flex justify-between gap-0.5\\">
         <div class=\\"flex items-center bg-gray-100 rounded w-1/3 w-1/2\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">x</span><input id=\\"position-x\\" type=\\"number\\" step=\\"1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>
         <div class=\\"flex items-center bg-gray-100 rounded w-1/3 w-1/2\\"><span class=\\"font-bold px-1 py-1 text-0.65rem text-gray-300\\">y</span><input id=\\"position-y\\" type=\\"number\\" step=\\"1\\" class=\\"w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none\\"></div>