From a8f990395dc7ebde4189c2bbfa374538166a42d6 Mon Sep 17 00:00:00 2001
From: vasu <vasucp1207@gmail.com>
Date: Mon, 19 Jun 2023 19:33:05 +0530
Subject: [PATCH] add docs

---
 docs/components/range.md                      | 68 ++++++++++++++++++-
 .../range/examples/DefaultRange.vue           |  7 +-
 .../range/examples/DisabledRange.vue          | 12 ++++
 .../components/range/examples/MinMaxRange.vue | 12 ++++
 docs/components/range/examples/SizeRange.vue  | 16 +++++
 docs/components/range/examples/StepsRange.vue | 12 ++++
 src/components/Range/Range.vue                | 15 ++--
 .../Range/composables/useRangeClasses.ts      |  2 +-
 8 files changed, 131 insertions(+), 13 deletions(-)
 create mode 100644 docs/components/range/examples/DisabledRange.vue
 create mode 100644 docs/components/range/examples/MinMaxRange.vue
 create mode 100644 docs/components/range/examples/SizeRange.vue
 create mode 100644 docs/components/range/examples/StepsRange.vue

diff --git a/docs/components/range.md b/docs/components/range.md
index 479d530..3141fc8 100644
--- a/docs/components/range.md
+++ b/docs/components/range.md
@@ -1,13 +1,79 @@
 <script setup>
 import DefaultRange from './range/examples/DefaultRange.vue'
+import DisabledRange from './range/examples/DisabledRange.vue'
+import MinMaxRange from './range/examples/MinMaxRange.vue'
+import StepsRange from './range/examples/StepsRange.vue'
+import SizeRange from './range/examples/SizeRange.vue'
 </script>
 
+# Vue Toggle Range - Flowbite
+#### Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/forms/range/](https://flowbite.com/docs/forms/range/)
+:::
+
 ## Default
 
 ```vue
 <template>
-  <Range />
+  <Range v-model="value" />
 </template>
+
+<script setup>
+import Range from 'flowbite-vue'
+import { ref } from 'vue'
+
+const value = ref(10)
+</script>
+
 ```
 
 <DefaultRange />
+
+## Disabled state
+
+```vue
+<template>
+  <Range v-model="value" label="Disabled range" :disabled="true" />
+</template>
+</script>
+```
+
+<DisabledRange />
+
+## Min and Max
+
+```vue
+<template>
+  <Range v-model="value" label="Min-max range" :min="0" :max="10" />
+</template>
+```
+
+<MinMaxRange />
+
+## Steps
+
+```vue
+<template>
+  <Range v-model="value"  label="Steps range" :steps="5" />
+</template>
+```
+
+<StepsRange />
+
+## Sizes
+
+```vue
+<template>
+  <div>
+    <Range v-model="value1" label="Small range" size="sm" />
+    <Range v-model="value2" label="Medium range" size="md" />
+    <Range v-model="value3" label="Large range" size="lg" />
+  </div>
+</template>
+```
+
+<SizeRange />
diff --git a/docs/components/range/examples/DefaultRange.vue b/docs/components/range/examples/DefaultRange.vue
index 4bb4e9a..a7e98ba 100644
--- a/docs/components/range/examples/DefaultRange.vue
+++ b/docs/components/range/examples/DefaultRange.vue
@@ -1,11 +1,6 @@
 <template>
   <div>
-    <Range v-model="value" :steps="5" :size="lg" />
-    <Range v-model="value" :steps="5" :disabled="true" />
-    <Range v-model="value" :steps="5" size="sm" />
-    <Range v-model="value" :steps="5" size="md" />
-    <Range v-model="value" :steps="5" size="lg" />
-    {{ value }}
+    <Range v-model="value" />
   </div>
 </template>
 
diff --git a/docs/components/range/examples/DisabledRange.vue b/docs/components/range/examples/DisabledRange.vue
new file mode 100644
index 0000000..457fea4
--- /dev/null
+++ b/docs/components/range/examples/DisabledRange.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <Range v-model="value" label="Disabled range" :disabled="true" />
+  </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value = ref(10)
+</script>
diff --git a/docs/components/range/examples/MinMaxRange.vue b/docs/components/range/examples/MinMaxRange.vue
new file mode 100644
index 0000000..9274114
--- /dev/null
+++ b/docs/components/range/examples/MinMaxRange.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <Range v-model="value" label="Min-max range" :min="0" :max="10" />
+  </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value = ref(10)
+</script>
diff --git a/docs/components/range/examples/SizeRange.vue b/docs/components/range/examples/SizeRange.vue
new file mode 100644
index 0000000..edf2b5f
--- /dev/null
+++ b/docs/components/range/examples/SizeRange.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <Range v-model="value1" label="Small range" size="sm" />
+    <Range v-model="value2" label="Medium range" size="md" />
+    <Range v-model="value3" label="Large range" size="lg" />
+  </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value1 = ref(10)
+const value2 = ref(10)
+const value3 = ref(10)
+</script>
diff --git a/docs/components/range/examples/StepsRange.vue b/docs/components/range/examples/StepsRange.vue
new file mode 100644
index 0000000..8f5aef8
--- /dev/null
+++ b/docs/components/range/examples/StepsRange.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <Range v-model="value" label="Steps range" :steps="5" />
+  </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value = ref(10)
+</script>
diff --git a/src/components/Range/Range.vue b/src/components/Range/Range.vue
index 088a365..0f2917c 100644
--- a/src/components/Range/Range.vue
+++ b/src/components/Range/Range.vue
@@ -1,26 +1,31 @@
 <template>
   <div>
-    <label for="default-range" :class="labelClasses">Default range</label>
-    <input :step="steps" v-model="model" :disabled="disabled" id="default-range" type="range" :class="rangeClasses">
+    <label for="default-range" :class="labelClasses">{{ label }}</label>
+    <input :step="steps" v-model="model" :min="min" :max="max" :disabled="disabled" id="default-range" type="range" :class="rangeClasses">
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
 import { useRangeClasses } from './composables/useRangeClasses'
+import type { InputSize } from '@/components/Input/types'
 
 interface RangeProps {
   modelValue?: number;
-  label?: '';
+  label?: string;
   disabled?: boolean;
-  size?: string;
+  min?: number;
+  max?: number;
+  size?: InputSize;
   steps?: number;
 }
 
 const props = withDefaults(defineProps<RangeProps>(), {
   modelValue: 50,
-  label: '',
+  label: 'Range slider',
   disabled: false,
+  min: 0,
+  max: 100,
   size: 'md',
   steps: 1,
 })
diff --git a/src/components/Range/composables/useRangeClasses.ts b/src/components/Range/composables/useRangeClasses.ts
index e6615aa..f7372fc 100644
--- a/src/components/Range/composables/useRangeClasses.ts
+++ b/src/components/Range/composables/useRangeClasses.ts
@@ -14,8 +14,8 @@ const rangeSizeClasses: Record<InputSize, string> = {
 }
 
 export type UseRangeClassesProps = {
-  disabled: Ref<boolean>
   size: Ref<InputSize>
+  disabled: Ref<boolean>
 }
 
 export function useRangeClasses(props: UseRangeClassesProps) {