Slider and text input changes (#65)

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="value" :min="1000" :max="10000" :step="1000" unit="mb"/>
-  <Slider v-model="valueTwo" :min="1000" :max="10000" :step="1000" :disabled="true"/>
+  <Slider v-model="valueTwo" :min="1000" :max="10000" :step="1000" unit="mb" :disabled="true"/>
 </DemoContainer>
 
 ```vue

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>
 ```

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 {

lib/components/base/Slider.vue

@@ -22,12 +22,8 @@
           @input="onInput($refs.input.value)"
         />
         <div class="slider-range">
-          <span>
+          <span> {{ min }} {{ unit }} </span>
-            {{ min }}
+          <span> {{ max }} {{ unit }} </span>
-          </span>
-          <span>
-            {{ max }}
-          </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>