feat(Range): increase narrowed surface (#459)

nuxt · Jul 29, 2023 · 3b183ac · 3b183ac
1 parent 3400e17
commit 3b183ac
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
@@ -612,15 +612,20 @@ const toggle = {
 }
 
 const range = {
-  wrapper: 'relative w-full',
-  base: 'w-full absolute appearance-none cursor-pointer disabled:cursor-not-allowed disabled:bg-opacity-50 focus:outline-none [&::-webkit-slider-runnable-track]:h-full [&::-moz-slider-runnable-track]:h-full peer',
-  background: 'bg-gray-200 dark:bg-gray-700',
+  wrapper: 'relative w-full flex items-center',
+  base: 'w-full absolute appearance-none cursor-pointer disabled:cursor-not-allowed disabled:bg-opacity-50 focus:outline-none peer group',
   rounded: 'rounded-lg',
+  background: 'bg-transparent',
   ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
   progress: {
-    base: 'absolute inset-0 h-full pointer-events-none peer-disabled:bg-opacity-50',
+    base: 'absolute pointer-events-none peer-disabled:bg-opacity-50',
     rounded: 'rounded-s-lg',
-    background: 'bg-{color}-500 dark:bg-{color}-400'
+    background: 'bg-{color}-500 dark:bg-{color}-400',
+    size: {
+      sm: 'h-1',
+      md: 'h-2',
+      lg: 'h-3'
+    }
   },
   thumb: {
     base: '[&::-webkit-slider-thumb]:relative [&::-moz-range-thumb]:relative [&::-webkit-slider-thumb]:z-[1] [&::-moz-range-thumb]:z-[1] [&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0',
@@ -633,10 +638,20 @@ const range = {
       lg: '[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1'
     }
   },
+  track: {
+    base: '[&::-webkit-slider-runnable-track]:group-disabled:bg-opacity-50 [&::-moz-slider-runnable-track]:group-disabled:bg-opacity-50',
+    background: '[&::-webkit-slider-runnable-track]:bg-gray-200 [&::-moz-slider-runnable-track]:bg-gray-200 [&::-webkit-slider-runnable-track]:dark:bg-gray-700 [&::-moz-slider-runnable-track]:dark:bg-gray-700',
+    rounded: '[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-slider-runnable-track]:rounded-lg',
+    size: {
+      sm: '[&::-webkit-slider-runnable-track]:h-1 [&::-moz-slider-runnable-track]:h-1',
+      md: '[&::-webkit-slider-runnable-track]:h-2 [&::-moz-slider-runnable-track]:h-2',
+      lg: '[&::-webkit-slider-runnable-track]:h-3 [&::-moz-slider-runnable-track]:h-3'
+    }
+  },
   size: {
-    sm: 'h-1',
-    md: 'h-2',
-    lg: 'h-3'
+    sm: 'h-3',
+    md: 'h-4',
+    lg: 'h-5'
   },
   default: {
     size: 'md',

diff --git a/src/runtime/components/forms/Range.vue b/src/runtime/components/forms/Range.vue
@@ -10,7 +10,7 @@
       :disabled="disabled"
       :step="step"
       type="range"
-      :class="[inputClass, thumbClass]"
+      :class="[inputClass, thumbClass, trackClass]"
       v-bind="$attrs"
     >
 
@@ -118,12 +118,21 @@ export default defineComponent({
       )
     })
 
+    const trackClass = computed(() => {
+      return classNames(
+        ui.value.track.base,
+        ui.value.track.background,
+        ui.value.track.rounded,
+        ui.value.track.size[props.size]
+      )
+    })
+
     const progressClass = computed(() => {
       return classNames(
         ui.value.progress.base,
         ui.value.progress.rounded,
         ui.value.progress.background.replaceAll('{color}', props.color),
-        ui.value.size[props.size]
+        ui.value.progress.size[props.size]
       )
     })
 
@@ -143,6 +152,7 @@ export default defineComponent({
       wrapperClass,
       inputClass,
       thumbClass,
+      trackClass,
       progressClass,
       progressStyle
     }