feat: enhance control components with new features and optimizations

- Added new controls (number and boolean dropdown) to TheChild component with watch functionality for value changes.
- Updated MultipleControlsDemo to use computed properties for dynamic button labels and icons based on dark mode.
- Removed unused computed import in SelectControlDemo for cleaner code.
- Enhanced TresLeches component to support slot content and improved height calculations for better resizing behavior.
- Refactored useControls to simplify unique key generation for controls.
- Expanded LechesSelectOption interface to include an alias property and refined control configurations for better type safety.

Author: alvarosabu

playground/src/pages/basic/parent-child/TheChild.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TresObject } from '@tresjs/core'
 import { useLoop } from '@tresjs/core'
-import { shallowRef } from 'vue'
+import { shallowRef, watch } from 'vue'
 import { OrbitControls } from '@tresjs/cientos'
 import { useControls } from '@tresjs/leches'
 
@@ -16,8 +16,32 @@ onBeforeRender(({ elapsed }) => {
   }
 })
 
-const { wireframe } = useControls({
+const { wireframe, number, booleanDropdown } = useControls({
   wireframe: false,
+  number: 1,
+  booleanDropdown: {
+    value: true,
+    options: [{
+      text: 'Option 1',
+      value: true,
+    }, {
+      text: 'Option 2',
+      value: false,
+    }, {
+      text: 'Option 3',
+      value: true,
+    }],
+  },
+})
+
+watch(booleanDropdown, (value) => {
+  // eslint-disable-next-line no-console
+  console.log('booleanDropdown', value)
+})
+
+watch(number, (value) => {
+  // eslint-disable-next-line no-console
+  console.log('number', value)
 })
 </script>
 

playground/src/pages/controls/MultipleControlsDemo.vue

@@ -6,7 +6,7 @@ import { OrbitControls } from '@tresjs/cientos'
 import { TresLeches, useControls } from '@tresjs/leches'
 
 /* import '@tresjs/leches/style.css' */
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useDark, useToggle } from '@vueuse/core'
 
 const cameraRef = ref()
@@ -40,13 +40,13 @@ const { clearColor, wireframe, position, rotation, select } = useControls({
   number: 1,
   text: 'Hello',
   accept: {
-    label: isDark.value ? 'Light' : 'Dark',
+    label: computed(() => isDark.value ? 'Light' : 'Dark'),
     type: 'button',
     variant: 'secondary',
     onClick: () => {
       toggleDark()
     },
-    icon: isDark.value ? 'i-carbon-sun' : 'i-carbon-moon',
+    icon: computed(() => isDark.value ? 'i-carbon-sun' : 'i-carbon-moon'),
     size: 'block',
   },
 })

playground/src/pages/controls/SelectControlDemo.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { Environment, OrbitControls } from '@tresjs/cientos'
 import { TresLeches, useControls } from '@tresjs/leches'

src/components/TresLeches.vue

@@ -19,6 +19,10 @@ const props = withDefaults(defineProps<{
   collapsed: false,
   float: true,
 })
+const slots = defineSlots<{
+  default: () => any
+}>()
+
 const { uuid, collapsed, float } = toRefs(props)
 
 // Panel
@@ -33,28 +37,23 @@ const { width } = useWindowSize()
 const { height: windowHeight } = useWindowSize()
 const isInitialized = ref(false)
 const isResizing = ref(false)
-const manualHeight = ref<number | null>(null) // Track manual height override
 
 const DEFAULT_WIDTH = 320
 const COLLAPSED_SIZE = 36
-const MIN_HEIGHT = 160 // Minimum height for the panel
+const MIN_HEIGHT = 148 // Minimum height for the panel
 const MAX_HEIGHT = 600 // Maximum height for the panel
 const CONTROL_HEIGHT = 44 // Approximate height per control
-const FPS_GRAPH_EXTRA_HEIGHT = 20 // Extra padding needed for FPS graph
+const FPS_GRAPH_EXTRA_HEIGHT = 26 // Extra padding needed for FPS graph
 
 const panelWidth = ref(DEFAULT_WIDTH)
 const resizeEdge = ref<'right' | 'left' | 'bottom' | 'corner' | 'corner-left' | null>(null)
 
 // Controls
 const controls = useControlsProvider(uuid?.value)
+const hasSlots = ref(false)
 
 defineExpose(controls)
 
-// Add cleanup when component is unmounted
-onUnmounted(() => {
-  dispose(uuid?.value)
-})
-
 function onChange(key: string, value: string) {
   controls[key].value = value
 }
@@ -75,39 +74,30 @@ const groupedControls = computed(() => {
   return groups
 })
 
-const panelHeight = computed({
-  get: () => {
-    if (isCollapsedAndNotFloat.value) { return COLLAPSED_SIZE } // Height when collapsed
-
-    // If manually resized, use that height within constraints
-    if (manualHeight.value !== null) {
-      const maxAllowedHeight = float.value ? windowHeight.value : MAX_HEIGHT
-      return Math.min(maxAllowedHeight, Math.max(MIN_HEIGHT, manualHeight.value))
+function calculateHeight() {
+  if (isCollapsedAndNotFloat.value) { return COLLAPSED_SIZE } // Height when collapsed
+
+  // Calculate total controls including those in folders
+  let totalControls = 0
+  let hasFPSGraph = false
+  for (const folderName in groupedControls.value) {
+    const controls = groupedControls.value[folderName]
+    totalControls += controls.length
+    // Add height for folder header if it's not the default folder
+    if (folderName !== 'default') { totalControls += 1 }
+    // Check if there's an FPS graph control
+    if (controls.some(control => control.type === 'fpsgraph')) {
+      hasFPSGraph = true
     }
+  }
 
-    // Calculate total controls including those in folders
-    let totalControls = 0
-    let hasFPSGraph = false
-    for (const folderName in groupedControls.value) {
-      const controls = groupedControls.value[folderName]
-      totalControls += controls.length
-      // Add height for folder header if it's not the default folder
-      if (folderName !== 'default') { totalControls += 1 }
-      // Check if there's an FPS graph control
-      if (controls.some(control => control.type === 'fpsgraph')) {
-        hasFPSGraph = true
-      }
-    }
+  // Calculate height: header (32px) + controls + padding + extra for FPS if present
+  const calculatedHeight = 32 + (totalControls * CONTROL_HEIGHT) + (hasFPSGraph ? FPS_GRAPH_EXTRA_HEIGHT : 0)
+  const maxAllowedHeight = float.value ? windowHeight.value : MAX_HEIGHT
+  return Math.min(maxAllowedHeight, Math.max(MIN_HEIGHT, calculatedHeight))
+}
 
-    // Calculate height: header (32px) + controls + padding + extra for FPS if present
-    const calculatedHeight = 32 + (totalControls * CONTROL_HEIGHT) + (hasFPSGraph ? FPS_GRAPH_EXTRA_HEIGHT : 0)
-    const maxAllowedHeight = float.value ? windowHeight.value : MAX_HEIGHT
-    return Math.min(maxAllowedHeight, Math.max(MIN_HEIGHT, calculatedHeight))
-  },
-  set: (value) => {
-    manualHeight.value = value
-  },
-})
+const panelHeight = ref(calculateHeight())
 
 const paneRef = ref<HTMLElement | null>(null)
 const handleRef = ref<HTMLElement | null>(null)
@@ -178,7 +168,7 @@ function startResize(edge: 'right' | 'left' | 'bottom' | 'corner' | 'corner-left
   const startX = e.clientX
   const startY = e.clientY
   const startWidth = panelWidth.value
-  const startHeight = manualHeight.value ?? panelHeight.value
+  const startHeight = panelHeight.value
   const startDragX = dragPosition.value.x
 
   function onMouseMove(e: MouseEvent) {
@@ -187,22 +177,20 @@ function startResize(edge: 'right' | 'left' | 'bottom' | 'corner' | 'corner-left
     if (resizeEdge.value === 'right' || resizeEdge.value === 'corner') {
       const deltaX = e.clientX - startX
       panelWidth.value = Math.max(280, startWidth + deltaX)
-      paneRef.value.style.maxWidth = `${panelWidth.value}px`
     }
 
     if (resizeEdge.value === 'left' || resizeEdge.value === 'corner-left') {
       const deltaX = startX - e.clientX
       const newWidth = Math.max(280, startWidth + deltaX)
       dragPosition.value.x = startDragX - deltaX
       panelWidth.value = newWidth
-      paneRef.value.style.maxWidth = `${panelWidth.value}px`
     }
 
     if (resizeEdge.value === 'bottom' || resizeEdge.value === 'corner' || resizeEdge.value === 'corner-left') {
       const deltaY = e.clientY - startY
       const maxAllowedHeight = float.value ? windowHeight.value : MAX_HEIGHT
-      manualHeight.value = Math.min(maxAllowedHeight, Math.max(MIN_HEIGHT, startHeight + deltaY))
-      paneRef.value.style.maxHeight = `${manualHeight.value}px`
+      panelHeight.value = Math.min(maxAllowedHeight, Math.max(MIN_HEIGHT, startHeight + deltaY))
+
       // Update gradients after resize
       handleScroll()
     }
@@ -221,29 +209,31 @@ function startResize(edge: 'right' | 'left' | 'bottom' | 'corner' | 'corner-left
   document.addEventListener('mouseup', onMouseUp)
 }
 
+watch(panelHeight, (value) => {
+  if (value && paneRef.value) {
+    paneRef.value.style.maxHeight = `${value}px`
+  }
+})
+
+watch(panelWidth, (value) => {
+  if (value && paneRef.value) {
+    paneRef.value.style.maxWidth = `${value}px`
+  }
+})
+
 function toggleCollapsed() {
   if (float.value) {
     isCollapsed.value = !isCollapsed.value
   }
 }
 
-// Initialize panel after slot content is rendered
-onMounted(async () => {
-  handleScroll()
-
-  // Wait for slot content to be rendered
-  await nextTick()
-
-  isInitialized.value = true
-})
-
 // Update animation when panel state changes
 watch(isCollapsed, async (value) => {
   if (!value) {
     await nextTick() // Wait for slot to be visible
     await apply({
       width: float.value ? panelWidth.value : 'none',
-      height: float.value ? (manualHeight.value || panelHeight.value) : 'none',
+      height: float.value ? panelHeight.value : 'none',
       right: float.value ? '1rem' : 'auto',
       left: float.value ? 'auto' : '0',
     })
@@ -254,11 +244,30 @@ watch(isCollapsed, async (value) => {
 
 function onFolderOpen(value: boolean) {
   panelHeight.value = panelHeight.value + (44 * (value ? 1 : -1))
-  if (manualHeight.value && paneRef.value) {
-    manualHeight.value = manualHeight.value + (44 * (value ? 1 : -1))
-    paneRef.value.style.maxHeight = `${manualHeight.value}px`
-  }
 }
+
+const slotsRef = ref()
+
+watch(slotsRef, (value) => {
+  panelHeight.value = panelHeight.value + value.clientHeight
+})
+
+// Initialize panel after slot content is rendered
+onMounted(async () => {
+  handleScroll()
+
+  // Wait for slot content to be rendered
+  await nextTick()
+
+  isInitialized.value = true
+
+  hasSlots.value = slots?.default ? slots?.default().length > 0 : false
+})
+
+// Add cleanup when component is unmounted
+onUnmounted(() => {
+  dispose(uuid?.value)
+})
 </script>
 
 <template>
@@ -303,7 +312,7 @@ function onFolderOpen(value: boolean) {
           </button>
         </div>
       </header>
-      <div v-show="!isCollapsed" class="tl-flex-1 tl-relative tl-overflow-hidden tl-my-4">
+      <div v-show="!isCollapsed" class="tl-flex-1 tl-relative tl-overflow-hidden tl-py-4">
         <!-- Gradient overlays moved outside scrollable area -->
         <div
           class="tl-pointer-events-none tl-absolute tl-left-0 tl-right-0 tl-top-0 tl-h-8 tl-bg-gradient-linear tl-bg-gradient-to-b tl-from-white dark:tl-from-dark-200 tl-to-transparent tl-z-20 tl-opacity-0 tl-transition-opacity duration-200"
@@ -337,7 +346,10 @@ function onFolderOpen(value: boolean) {
               />
             </template>
           </template>
-          <slot></slot>
+
+          <div v-if="hasSlots" ref="slotsRef" class="tl-px-4">
+            <slot></slot>
+          </div>
         </div>
       </div>
       <!-- Resize handles -->

src/composables/useControls.ts

@@ -116,11 +116,8 @@ export const useControls = (
     // If the control is part of a folder, prefix the key with the folder name
     if (folderName) {
       key = `${folderName.replace(/[\u{1F300}-\u{1F9FF}]/gu, '').trim()}${capitalize(key)}`
-      uniqueKey = `${uuid}-${key}`
-    }
-    else {
-      uniqueKey = `${uuid}-${key}`
     }
+    uniqueKey = `${uuid}-${key}`
 
     // If the value is an object with control options
     if (typeof value === 'object' && !isRef(value) && !Array.isArray(value) && value.value !== undefined) {

src/types/index.ts

@@ -1,9 +1,34 @@
 export interface LechesSelectOption {
   text: string
+  alias: string
   value: string | number
 }
 
-export interface LechesControl<T = any> {
+export type LechesValue = string | number | boolean
+
+export type LechesCotrolConfigTypes = 'select' | 'button' | 'range' | 'boolean' | 'text' | 'number'
+export interface LechesBaseControlConfig {
+  value: unknown
+  label?: string
+  icon?: string
+  type?: LechesCotrolConfigTypes
+}
+
+export interface LechesSelectControlConfig extends LechesBaseControlConfig {
+  options: string[] | LechesSelectOption[]
+}
+
+export interface LechesSelectControlButton extends LechesBaseControlConfig {
+  variant: 'primary' | 'secondary',
+  onClick?: () => void
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'block'
+}
+
+export interface LechesControlsConfig {
+  [key:string]: 
+}
+
+export interface LechesControl<T = unknown> {
   key: string
   label: string
   name: string
@@ -17,5 +42,5 @@ export interface LechesControl<T = any> {
   min?: number
   max?: number
   step?: number
-  onUpdate?: (values: any[]) => void
+  onUpdate?: (values: unknown[]) => void
 }