Merge pull request #132 from Tresjs/feature/improve-ui

feat: add unocss-preset-scrollbar and update component styles

Author: alvarosabu

package.json

@@ -61,7 +61,8 @@
   "dependencies": {
     "@unocss/core": "^65.4.2",
     "@vueuse/components": "^12.4.0",
-    "@vueuse/motion": "^2.2.6"
+    "@vueuse/motion": "^2.2.6",
+    "unocss-preset-scrollbar": "^0.3.1"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.17",

pnpm-lock.yaml

@@ -22,7 +22,7 @@ function onKeydown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <div class="tl-flex tl-px-4 tl-justify-start tl-gap-2 tl-items-center tl-mb-2 tl-min-h-32px">
+  <div class="tl-flex tl-px-4 tl-justify-start tl-items-center tl-mb-2 tl-min-h-32px">
     <label class="tl-text-gray-500 tl-w-1/3">{{ label }}</label>
     <input
       :id="control.uniqueKey"
@@ -48,6 +48,7 @@ function onKeydown(event: KeyboardEvent) {
           tl-rounded
           tl-border
           tl-border-gray-300
+          tl-text-white
           tl-mr-2
           tl-transition-colors
           tl-duration-200"

src/components/BooleanControl.vue

@@ -15,7 +15,7 @@ function onChange(event: Event) {
 </script>
 
 <template>
-  <div class="tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2">
+  <div class="tl-flex tl-px-4 tl-justify-between  tl-items-center tl-mb-2">
     <label class="tl-text-gray-500 tl-w-1/3">{{ label }}</label>
     <input
       :id="control.uniqueKey"

src/components/ColorControl.vue

@@ -1,24 +1,49 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { useFps, useRafFn } from '@vueuse/core'
 import type { LechesControl } from '../types'
 
 defineProps<{
   label: string
   control: LechesControl
 }>()
-const width = 160
-const height = 40
+
+const containerRef = ref<HTMLElement | null>(null)
+const width = ref(160)
+const height = ref(40)
 const strokeWidth = 2
 const updateInterval = 100 // Update interval in milliseconds
 const topOffset = 20 // Offset from the top
 const fps = useFps({ every: updateInterval })
 
 const points = ref('')
 const frameTimes = ref([])
-const maxFrames = ref(width / strokeWidth)
+const maxFrames = ref(width.value / strokeWidth)
 
 let lastUpdateTime = performance.now()
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  if (containerRef.value) {
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        width.value = entry.contentRect.width
+        maxFrames.value = Math.floor(width.value / strokeWidth)
+        // Trim frame times if needed after resize
+        if (frameTimes.value.length > maxFrames.value) {
+          frameTimes.value = frameTimes.value.slice(-maxFrames.value)
+        }
+      }
+    })
+    resizeObserver.observe(containerRef.value)
+  }
+})
+
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+  }
+})
 
 useRafFn(({ timestamp }) => {
   if (timestamp - lastUpdateTime >= updateInterval) {
@@ -34,7 +59,7 @@ useRafFn(({ timestamp }) => {
       .map(
         (fps, index) =>
           `${index * strokeWidth},${
-            height + topOffset - strokeWidth / 2 - (fps * (height + topOffset - strokeWidth)) / 120
+            height.value + topOffset - strokeWidth / 2 - (fps * (height.value + topOffset - strokeWidth)) / 120
           }`,
       )
       .join(' ')
@@ -43,20 +68,20 @@ useRafFn(({ timestamp }) => {
 </script>
 
 <template>
-  <div class="tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2">
+  <div class="tl-flex tl-px-4 tl-items-center tl-mb-2">
     <label class="tl-text-gray-500 tl-w-1/3">{{ label }}</label>
 
     <div
+      ref="containerRef"
       class="
         tl-relative
         tl-w-2/3
-        tl-p-1
+        tl-py-1
         tl-rounded
         tl-text-right
         tl-text-xs
         tl-text-gray-400
         tl-bg-gray-100
-        tl-focus:border-gray-200
         tl-outline-none
         tl-border-none
         tl-font-sans

src/components/FPSGraph.vue

@@ -57,7 +57,7 @@ watch(mouse.x, (newValue) => {
 </script>
 
 <template>
-  <div class="tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2">
+  <div class="tl-flex tl-px-4 tl-justify-between  tl-items-center tl-mb-2">
     <ControlLabel
       :label="label"
       :control="control"

src/components/NumberControl.vue

@@ -15,7 +15,7 @@ function onChange(event: Event) {
 </script>
 
 <template>
-  <div class="tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2 tl-min-h-32px">
+  <div class="tl-flex tl-px-4 tl-justify-start  tl-items-center tl-mb-2 tl-min-h-32px">
     <ControlLabel
       :label="label"
       :control="control"

src/components/SelectControl.vue

@@ -63,45 +63,47 @@ watch(mouse.x, (newValue) => {
 </script>
 
 <template>
-  <div class="tl-px-4 tl-relative tl-flex tl-justify-between tl-gap-4 tl-items-center tl-mb-2">
+  <div class="tl-px-4 tl-relative tl-flex tl-justify-between tl-items-center tl-mb-2">
     <ControlLabel
       :label="label"
       :control="control"
     />
-    <input
-      :value="control.value"
-      class="tl-w-1/2 tl-h-0.75 tl-bg-dark-200 tl-rounded-full tl-appearance-none"
-      :style="sliderFilledStyle"
-      type="range"
-      :min="control.min"
-      :max="control.max"
-      :step="control.step"
-      @input="onChange"
-    />
-    <input
-      :value="control.value"
-      class="
-        tl-p-2
-        tl-w-1/4
-        tl-rounded
-        tl-text-right
-        tl-text-xs
-        tl-text-gray-400
-        tl-bg-gray-100
-        tl-focus:border-gray-200
-        tl-outline-none
-        tl-border-none
-        tl-font-sans
-      "
-      :class="{ 'tl-cursor-ew-resize': isMouseDown }"
-      type="number"
-      :min="control.min"
-      :max="control.max"
-      :step="control.step"
-      @input="onChange"
-      @mousedown="onInputMouseDown"
-      @mouseup="onInputMouseUp"
-    />
+    <div class="tl-relative tl-w-2/3 tl-flex tl-justify-between tl-items-center tl-gap-0.5">
+      <input
+        :value="control.value"
+        class="tl-w-1/2 tl-h-0.75 tl-bg-dark-200 tl-rounded-full tl-appearance-none"
+        :style="sliderFilledStyle"
+        type="range"
+        :min="control.min"
+        :max="control.max"
+        :step="control.step"
+        @input="onChange"
+      />
+      <input
+        :value="control.value"
+        class="
+          tl-p-2
+          tl-w-1/4
+          tl-rounded
+          tl-text-right
+          tl-text-xs
+          tl-text-gray-400
+          tl-bg-gray-100
+          tl-focus:border-gray-200
+          tl-outline-none
+          tl-border-none
+          tl-font-sans
+        "
+        :class="{ 'tl-cursor-ew-resize': isMouseDown }"
+        type="number"
+        :min="control.min"
+        :max="control.max"
+        :step="control.step"
+        @input="onChange"
+        @mousedown="onInputMouseDown"
+        @mouseup="onInputMouseUp"
+      />
+    </div>
   </div>
 </template>
 
@@ -114,10 +116,10 @@ input[type='range'] {
 }
 
 input[type='range']::-webkit-slider-thumb {
-  @apply tl-h-4 tl-w-3 tl-border-2 tl-bg-dark-200 tl-rounded-sm tl-cursor-pointer tl-appearance-none tl-shadow-lg;
+  @apply h-4 w-3 border-2 bg-dark-200 rounded-sm cursor-pointer appearance-none shadow-lg;
 }
 
 input[type='range']::-moz-range-thumb {
-  @apply tl-h-4 tl-w-3 tl-border-2 tl-bg-dark-200 tl-rounded-sm tl-cursor-pointer tl-appearance-none tl-shadow-lg;
+  @apply h-4 w-3 border-2 bg-dark-200 rounded-sm cursor-pointer appearance-none shadow-lg;
 }
 </style>

src/components/SliderControl.vue

@@ -16,7 +16,7 @@ function onChange(event: Event) {
 </script>
 
 <template>
-  <div class="tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2 tl-min-h-32px">
+  <div class="tl-flex tl-px-4 tl-justify-between  tl-items-center tl-mb-2 tl-min-h-32px">
     <ControlLabel
       :label="label"
       :control="control"

src/components/TextControl.vue

@@ -162,11 +162,11 @@ watch(isCollapsed, async (value) => {
   <div
     :id="`tres-leches-pane-${uuid}`"
     ref="paneRef"
-    class="tl-fixed tl-top-4 tl-z-24 tl-bg-white tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-overflow-hidden"
+    class="tl-fixed tl-top-4 tl-z-24 tl-bg-white tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-flex tl-flex-col"
     :class="[$attrs.class, isCollapsed ? 'tl-rounded-full' : 'tl-rounded-lg']"
     :style="[style, { width: `${panelWidth}px`, height: `${panelHeight}px`, right: '16px', left: 'auto' }]"
   >
-    <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 tl-text-xs">
+    <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 tl-text-xs tl-flex-none">
       <div v-show="!isCollapsed" class="w-1/3"></div>
       <div v-show="!isCollapsed" ref="handleRef" class="tl-cursor-grabbing">
         <i class="i-ic-baseline-drag-indicator"></i><i class="i-ic-baseline-drag-indicator"></i><i
@@ -190,7 +190,7 @@ watch(isCollapsed, async (value) => {
         @mouseleave="isHover = false"
       >🍰</i>
     </header>
-    <div v-if="!isCollapsed" class="mt-2">
+    <div v-if="!isCollapsed" class="tl-flex-1 tl-overflow-y-auto tl-overflow-x-hidden tl-my-4 tl-scrollbar tl-scrollbar-rounded tl-scrollbar-w-4px tl-scrollbar-radius-2 tl-scrollbar-track-radius-4 tl-scrollbar-thumb-radius-4">
       <template
         v-for="(group, folderName) of groupedControls"
         :key="folderName"