From cea5a18a7a350efb58fb1c09834e5da62b1b96e8 Mon Sep 17 00:00:00 2001
From: "Adrian O.V" <83074853+CodexAdrian@users.noreply.github.com>
Date: Sat, 10 Jun 2023 12:18:15 -0400
Subject: [PATCH] Slider and text input changes (#65)

---
 docs/components/slider.md       |  4 ++--
 docs/components/text-inputs.md  | 18 ++++++++++++++++++
 lib/assets/styles/defaults.scss | 15 ++++++++++++++-
 lib/components/base/Slider.vue  | 15 ++++++++-------
 4 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/docs/components/slider.md b/docs/components/slider.md
index 17a6ef002..b101c721a 100644
--- a/docs/components/slider.md
+++ b/docs/components/slider.md
@@ -8,8 +8,8 @@ const valueTwo = ref(0)
 </script>
 
 <DemoContainer>
-  <Slider v-model="value" :min="1000" :max="10000" :step="1000"/>
-  <Slider v-model="valueTwo" :min="1000" :max="10000" :step="1000" :disabled="true"/>
+  <Slider v-model="value" :min="1000" :max="10000" :step="1000" unit="mb"/>
+  <Slider v-model="valueTwo" :min="1000" :max="10000" :step="1000" unit="mb" :disabled="true"/>
 </DemoContainer>
 
 ```vue
diff --git a/docs/components/text-inputs.md b/docs/components/text-inputs.md
index 9f757a77a..3ad64071f 100644
--- a/docs/components/text-inputs.md
+++ b/docs/components/text-inputs.md
@@ -1,4 +1,9 @@
 # Text Inputs
+<script setup>
+import { ref } from "vue";
+const inputText = ref(null)
+</script>
+
 <DemoContainer>
 <input
     type="text"
@@ -17,18 +22,31 @@
 <div class="iconified-input">
   <SearchIcon/>
   <input
+      v-model="inputText"
       type="text"
       placeholder="Text input"
   />
+  <Button @click="() => inputText = ''">
+    <XIcon/>
+  </Button>
 </div>
 </DemoContainer>
 
 ```vue
+<script setup>
+import { ref } from "vue";
+const inputText = ref(null)
+</script>
+
 <div class="iconified-input">
   <SearchIcon/>
   <input
+    v-model="inputText"
     type="text"
     placeholder="Text input"
   />
+  <Button @click="() => inputText = ''">
+    <XIcon/>
+  </Button>
 </div>
 ```
diff --git a/lib/assets/styles/defaults.scss b/lib/assets/styles/defaults.scss
index 1b1393bf9..036cef20d 100644
--- a/lib/assets/styles/defaults.scss
+++ b/lib/assets/styles/defaults.scss
@@ -99,7 +99,7 @@ input[type='number'] {
   position: relative;
 
   input {
-    padding-left: 2.25rem;
+    padding: 0 2.5rem;
     width: 100%;
   }
 
@@ -118,6 +118,19 @@ input[type='number'] {
     color: var(--color-base);
     opacity: 0.6;
   }
+
+  .btn {
+    @extend .transparent, .icon-only;
+
+    position: absolute;
+    right: 0.25rem;
+    z-index: 1;
+
+    svg {
+      position: relative;
+      left: 0;
+    }
+  }
 }
 
 svg {
diff --git a/lib/components/base/Slider.vue b/lib/components/base/Slider.vue
index 2dbb12b6f..4341c7b2f 100644
--- a/lib/components/base/Slider.vue
+++ b/lib/components/base/Slider.vue
@@ -22,12 +22,8 @@
           @input="onInput($refs.input.value)"
         />
         <div class="slider-range">
-          <span>
-            {{ min }}
-          </span>
-          <span>
-            {{ max }}
-          </span>
+          <span> {{ min }} {{ unit }} </span>
+          <span> {{ max }} {{ unit }} </span>
         </div>
       </div>
     </div>
@@ -72,6 +68,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  unit: {
+    type: String,
+    default: '',
+  },
 })
 
 let currentValue = ref(Math.max(props.min, props.modelValue).toString())
@@ -178,6 +178,7 @@ const onInput = (value) => {
 }
 
 .disabled {
-  filter: brightness(0.8);
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 </style>