From 625511d28bff7460be79af0d0a681f29e8993ea3 Mon Sep 17 00:00:00 2001
From: Geometrically <18202329+Geometrically@users.noreply.github.com>
Date: Thu, 18 May 2023 19:57:35 -0700
Subject: [PATCH] Disabling sliders (#51)

* Add disabled slider to omorphia

* lint
---
 docs/components/slider.md        |  2 ++
 lib/components/base/Checkbox.vue |  1 +
 lib/components/base/Slider.vue   | 18 ++++++++++++++++--
 package.json                     |  2 +-
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/docs/components/slider.md b/docs/components/slider.md
index f1c1ac44..17a6ef00 100644
--- a/docs/components/slider.md
+++ b/docs/components/slider.md
@@ -4,10 +4,12 @@
 import { ref } from "vue"; 
 
 const value = ref(0)
+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"/>
 </DemoContainer>
 
 ```vue
diff --git a/lib/components/base/Checkbox.vue b/lib/components/base/Checkbox.vue
index f31a7cf4..4977ee3b 100644
--- a/lib/components/base/Checkbox.vue
+++ b/lib/components/base/Checkbox.vue
@@ -86,6 +86,7 @@ export default defineComponent({
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  outline: none;
 
   min-width: 1rem;
   min-height: 1rem;
diff --git a/lib/components/base/Slider.vue b/lib/components/base/Slider.vue
index 0f2cb220..2dbb12b6 100644
--- a/lib/components/base/Slider.vue
+++ b/lib/components/base/Slider.vue
@@ -10,6 +10,10 @@
           :max="max"
           :step="step"
           class="slider"
+          :class="{
+            disabled: disabled,
+          }"
+          :disabled="disabled"
           :style="{
             '--current-value': currentValue,
             '--min-value': min,
@@ -32,6 +36,7 @@
       :value="currentValue"
       type="text"
       class="slider-input"
+      :disabled="disabled"
       @change="onInput($refs.value.value)"
     />
   </div>
@@ -63,12 +68,17 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 let currentValue = ref(Math.max(props.min, props.modelValue).toString())
 
 const inputValueValid = (newValue) => {
   const parsedValue = parseInt(newValue)
+
   if (parsedValue < props.min) {
     currentValue.value = props.min.toString()
   } else if (parsedValue > props.max) {
@@ -142,13 +152,13 @@ const onInput = (value) => {
   transition: 0.2s;
 }
 
-.slider-component .slide-container .slider:hover::-webkit-slider-thumb {
+.slider-component .slide-container .slider:hover::-webkit-slider-thumb:not(.disabled) {
   width: 1rem;
   height: 1rem;
   transition: 0.2s;
 }
 
-.slider-component .slide-container .slider:hover::-moz-range-thumb {
+.slider-component .slide-container .slider:hover::-moz-range-thumb:not(.disabled) {
   width: 1rem;
   height: 1rem;
   transition: 0.2s;
@@ -166,4 +176,8 @@ const onInput = (value) => {
   font-size: 0.75rem;
   margin: 0;
 }
+
+.disabled {
+  filter: brightness(0.8);
+}
 </style>
diff --git a/package.json b/package.json
index bc498146..357e6259 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.15",
+  "version": "0.4.16",
   "files": [
     "dist"
   ],