From d76dbaa2c26292a73a41380fd0ef72cb97a0dca6 Mon Sep 17 00:00:00 2001
From: Demis Bellot <demis.bellot@gmail.com>
Date: Sat, 19 Oct 2024 13:41:42 +0800
Subject: [PATCH] remove shadow from range input element

---
 src/components/TextInput.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/TextInput.vue b/src/components/TextInput.vue
index 23b5be0..726faa3 100644
--- a/src/components/TextInput.vue
+++ b/src/components/TextInput.vue
@@ -2,7 +2,7 @@
   <div :class="[$attrs.class]">
     <slot name="header" :inputElement="inputElement" :id="id" :modelValue="modelValue" :status="status" v-bind="$attrs"></slot>
     <label v-if="useLabel" :for="id" :class="`block text-sm font-medium text-gray-700 dark:text-gray-300 ${labelClass??''}`">{{ useLabel }}</label>
-    <div class="mt-1 relative rounded-md shadow-sm">
+    <div :class="fixShadow('mt-1 relative shadow-sm rounded-md')">
 
      <input ref="inputElement" :type="useType"
         :name="id"
@@ -68,9 +68,14 @@ function focus() {
 const useType = computed(() => props.type || 'text')
 const useLabel = computed(() => props.label ?? humanize(toPascalCase(props.id)))
 const usePlaceholder = computed(() => props.placeholder ?? useLabel.value)
+function fixShadow(cls:string) {
+  return props.type === 'range'
+    ? cls.replace('shadow-sm ', '')
+    : cls
+}
 
 let ctx: ApiState|undefined = inject('ApiState', undefined)
 const errorField = computed(() => errorResponse.call({ responseStatus: props.status ?? ctx?.error.value }, props.id))
 
-const cls = computed(() => [input.base, errorField.value ? input.invalid : input.valid, props.inputClass])
+const cls = computed(() => [input.base, errorField.value ? input.invalid : fixShadow(input.valid), props.inputClass])
 </script>