Skip to content

Commit fbd4f07

Browse files
cogorcogor
committed
refactor: Range component
1 parent e527d5b commit fbd4f07

File tree

9 files changed

+126
-42
lines changed

9 files changed

+126
-42
lines changed

‎docs/components/range.md‎

Lines changed: 74 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,17 @@ Original reference: [https://flowbite.com/docs/forms/range/](https://flowbite.co
1919

2020
```vue
2121
<template>
22-
<Range v-model="value" />
22+
<div class="vp-raw">
23+
<fwb-range v-model="value" />
24+
</div>
2325
</template>
2426
2527
<script setup>
26-
import Range from 'flowbite-vue'
27-
import { ref } from 'vue'
28+
import { FwbRange } from 'flowbite-vue'
29+
import { ref } from 'vue'
2830
29-
const value = ref('10')
31+
const value = ref('10')
3032
</script>
31-
3233
```
3334

3435
<DefaultRange />
@@ -37,8 +38,20 @@ const value = ref('10')
3738

3839
```vue
3940
<template>
40-
<Range v-model="value" label="Disabled range" :disabled="true" />
41+
<div>
42+
<fwb-range
43+
v-model="value"
44+
label="Disabled range"
45+
:disabled="true"
46+
/>
47+
</div>
4148
</template>
49+
50+
<script setup>
51+
import { FwbRange } from 'flowbite-vue'
52+
import { ref } from 'vue'
53+
54+
const value = ref('10')
4255
</script>
4356
```
4457

@@ -48,8 +61,22 @@ const value = ref('10')
4861

4962
```vue
5063
<template>
51-
<Range v-model="value" label="Min-max range" min="0" max="10" />
64+
<div>
65+
<fwb-range
66+
v-model="value"
67+
label="Min-max range"
68+
min="0"
69+
max="10"
70+
/>
71+
</div>
5272
</template>
73+
74+
<script setup>
75+
import { FwbRange } from 'flowbite-vue'
76+
import { ref } from 'vue'
77+
78+
const value = ref('10')
79+
</script>
5380
```
5481

5582
<MinMaxRange />
@@ -58,8 +85,21 @@ const value = ref('10')
5885

5986
```vue
6087
<template>
61-
<Range v-model="value" label="Steps range" steps="5" />
88+
<div>
89+
<fwb-range
90+
v-model="value"
91+
label="Steps range"
92+
steps="5"
93+
/>
94+
</div>
6295
</template>
96+
97+
<script setup>
98+
import { FwbRange } from 'flowbite-vue'
99+
import { ref } from 'vue'
100+
101+
const value = ref('10')
102+
</script>
63103
```
64104

65105
<StepsRange />
@@ -68,12 +108,34 @@ const value = ref('10')
68108

69109
```vue
70110
<template>
71-
<div>
72-
<Range v-model="value1" label="Small range" size="sm" />
73-
<Range v-model="value2" label="Medium range" size="md" />
74-
<Range v-model="value3" label="Large range" size="lg" />
111+
<div class="flex flex-col gap-3">
112+
<fwb-range
113+
v-model="value"
114+
label="Small range"
115+
size="sm"
116+
/>
117+
<fwb-range
118+
v-model="value"
119+
label="Medium range"
120+
size="md"
121+
/>
122+
<fwb-range
123+
v-model="value"
124+
label="Large range"
125+
size="lg"
126+
/>
127+
<div class="mt-2">
128+
Value: {{ value }}
129+
</div>
75130
</div>
76131
</template>
132+
133+
<script setup>
134+
import { FwbRange } from 'flowbite-vue'
135+
import { ref } from 'vue'
136+
137+
const value = ref('10')
138+
</script>
77139
```
78140

79141
<SizeRange />

‎docs/components/range/examples/DefaultRange.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<template>
2-
<div>
3-
<range v-model="value" />
2+
<div class="vp-raw">
3+
<fwb-range v-model="value" />
4+
<div class="mt-2">
5+
Value: {{ value }}
6+
</div>
47
</div>
58
</template>
69

710
<script setup>
8-
import Range from '../../../../src/components/Range/Range.vue'
11+
import { FwbRange } from '../../../../src/index'
912
import { ref } from 'vue'
1013
1114
const value = ref('10')

‎docs/components/range/examples/DisabledRange.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
<template>
2-
<div>
3-
<range
2+
<div class="vp-raw">
3+
<fwb-range
44
v-model="value"
55
label="Disabled range"
66
:disabled="true"
77
/>
8+
<div class="mt-2">
9+
Value: {{ value }}
10+
</div>
811
</div>
912
</template>
1013

1114
<script setup>
12-
import Range from '../../../../src/components/Range/Range.vue'
15+
import { FwbRange } from '../../../../src/index'
1316
import { ref } from 'vue'
1417
1518
const value = ref('10')

‎docs/components/range/examples/MinMaxRange.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
<template>
2-
<div>
3-
<range
2+
<div class="vp-raw">
3+
<fwb-range
44
v-model="value"
55
label="Min-max range"
66
min="0"
77
max="10"
88
/>
9+
<div class="mt-2">
10+
Value: {{ value }}
11+
</div>
912
</div>
1013
</template>
1114

1215
<script setup>
13-
import Range from '../../../../src/components/Range/Range.vue'
16+
import { FwbRange } from '../../../../src/index'
1417
import { ref } from 'vue'
1518
1619
const value = ref('10')

‎docs/components/range/examples/SizeRange.vue‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
11
<template>
2-
<div class="flex flex-col gap-3">
3-
<range
4-
v-model="value1"
2+
<div class="flex flex-col gap-3 vp-raw">
3+
<fwb-range
4+
v-model="value"
55
label="Small range"
66
size="sm"
77
/>
8-
<range
9-
v-model="value2"
8+
<fwb-range
9+
v-model="value"
1010
label="Medium range"
1111
size="md"
1212
/>
13-
<range
14-
v-model="value3"
13+
<fwb-range
14+
v-model="value"
1515
label="Large range"
1616
size="lg"
1717
/>
18+
<div class="mt-2">
19+
Value: {{ value }}
20+
</div>
1821
</div>
1922
</template>
2023

2124
<script setup>
22-
import Range from '../../../../src/components/Range/Range.vue'
25+
import { FwbRange } from '../../../../src/index'
2326
import { ref } from 'vue'
2427
25-
const value1 = ref('10')
26-
const value2 = ref('10')
27-
const value3 = ref('10')
28+
const value = ref('10')
2829
</script>

‎docs/components/range/examples/StepsRange.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
<template>
2-
<div>
3-
<range
2+
<div class="vp-raw">
3+
<fwb-range
44
v-model="value"
55
label="Steps range"
66
steps="5"
77
/>
8+
<div class="mt-2">
9+
Value: {{ value }}
10+
</div>
811
</div>
912
</template>
1013

1114
<script setup>
12-
import Range from '../../../../src/components/Range/Range.vue'
15+
import { FwbRange } from '../../../../src/index'
1316
import { ref } from 'vue'
1417
1518
const value = ref('10')

‎src/components/Range/Range.vue‎ renamed to ‎src/components/FwbRange/FwbRange.vue‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<template>
2-
<div>
3-
<label
4-
for="default-range"
2+
<label class="flex flex-col">
3+
<span
54
:class="labelClasses"
6-
>{{ label }}</label>
5+
>{{ label }}</span>
76
<input
87
v-model="model"
98
:step="steps"
@@ -13,7 +12,7 @@
1312
type="range"
1413
:class="rangeClasses"
1514
>
16-
</div>
15+
</label>
1716
</template>
1817

1918
<script lang="ts" setup>
@@ -53,3 +52,14 @@ const model = computed({
5352
5453
const { rangeClasses, labelClasses } = useRangeClasses(toRefs(props))
5554
</script>
55+
56+
<style scoped>
57+
input[type="range"].range-lg::-moz-range-thumb {
58+
height: 1.5rem;
59+
width: 1.5rem;
60+
}
61+
input[type="range"].range-sm::-moz-range-thumb {
62+
height: 1rem;
63+
width: 1rem;
64+
}
65+
</style>

‎src/components/Range/composables/useRangeClasses.ts‎ renamed to ‎src/components/FwbRange/composables/useRangeClasses.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { computed } from 'vue'
33
import type { Ref } from 'vue'
44
import type { InputSize } from '@/components/FwbInput/types'
55

6-
// Range
76
const rangeDefaultClasses = 'w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700'
87
const rangeLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
98

‎src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export { default as Select } from './components/Select/Select.vue'
6767

6868
export { default as FwbToggle } from './components/Toggle/Toggle.vue'
6969

70-
export { default as Range } from './components/Range/Range.vue'
70+
export { default as FwbRange } from '@/components/FwbRange/FwbRange.vue'
7171

7272
export { default as FwbRadio } from '@/components/FwbRadio/FwbRadio.vue'
7373

0 commit comments

Comments
 (0)