Skip to content

Commit db8b9f9

Browse files
cogorcogor
committed
refactor: Select component
1 parent fbd4f07 commit db8b9f9

File tree

10 files changed

+191
-143
lines changed

10 files changed

+191
-143
lines changed

‎docs/components/select.md‎

Lines changed: 90 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,28 @@ The select input component can be used to gather information from users based on
1919

2020
## Default
2121
```vue
22-
<script setup>
23-
import { ref } from 'vue'
24-
import { Select } from 'flowbite-vue'
25-
26-
let selected = ref('')
27-
const countries = [
28-
{ value: 'us', name: 'United States' },
29-
{ value: 'ca', name: 'Canada' },
30-
{ value: 'fr', name: 'France' },
31-
]
32-
</script>
3322
<template>
34-
<Select v-model="selected" :options="countries" />
23+
<div>
24+
<fwb-select
25+
v-model="selected"
26+
:options="countries"
27+
label="Select a country"
28+
/>
29+
</div>
3530
</template>
31+
32+
<script setup>
33+
import { ref } from 'vue'
34+
import { FwbSelect } from 'flowbite-vue'
35+
36+
const selected = ref('')
37+
const countries = [
38+
{ value: 'us', name: 'United States' },
39+
{ value: 'ca', name: 'Canada' },
40+
{ value: 'fr', name: 'France' },
41+
]
42+
</script>
43+
3644
```
3745

3846
<SelectExample />
@@ -42,9 +50,27 @@ const countries = [
4250
```vue
4351
<template>
4452
<div>
45-
<Select v-model="selected" :options="countries" placeholder="You can't select" :disabled="true" />
53+
<fwb-select
54+
v-model="selected"
55+
:options="countries"
56+
placeholder="You can't select"
57+
label="Select a country"
58+
:disabled="true"
59+
/>
4660
</div>
4761
</template>
62+
63+
<script setup>
64+
import { ref } from 'vue'
65+
import { FwbSelect } from 'flowbite-vue'
66+
67+
const selected = ref('')
68+
const countries = [
69+
{ value: 'us', name: 'United States' },
70+
{ value: 'ca', name: 'Canada' },
71+
{ value: 'fr', name: 'France' },
72+
]
73+
</script>
4874
```
4975

5076
<DisabledSelect />
@@ -54,9 +80,26 @@ const countries = [
5480
```vue
5581
<template>
5682
<div>
57-
<Select v-model="selected" :options="countries" :underline="true" />
83+
<fwb-select
84+
v-model="selected"
85+
:options="countries"
86+
label="Select a country"
87+
:underline="true"
88+
/>
5889
</div>
5990
</template>
91+
92+
<script setup>
93+
import { ref } from 'vue'
94+
import { FwbSelect } from 'flowbite-vue'
95+
96+
const selected = ref('')
97+
const countries = [
98+
{ value: 'us', name: 'United States' },
99+
{ value: 'ca', name: 'Canada' },
100+
{ value: 'fr', name: 'France' },
101+
]
102+
</script>
60103
```
61104

62105
<UnderlinedSelect />
@@ -65,12 +108,40 @@ const countries = [
65108

66109
```vue
67110
<template>
68-
<div>
69-
<Select v-model="selected" :options="countries" :size="lg" />
70-
<Select v-model="selected" :options="countries" :size="md" />
71-
<Select v-model="selected" :options="countries" :size="sm" />
111+
<div class="flex flex-col gap-2">
112+
<fwb-select
113+
v-model="selected"
114+
:options="countries"
115+
label="Select a country"
116+
size="lg"
117+
/>
118+
<fwb-select
119+
v-model="selected"
120+
:options="countries"
121+
label="Select a country"
122+
size="md"
123+
/>
124+
<fwb-select
125+
v-model="selected"
126+
:options="countries"
127+
label="Select a country"
128+
size="sm"
129+
/>
72130
</div>
73131
</template>
132+
133+
<script setup>
134+
import { ref } from 'vue'
135+
import { FwbSelect } from 'flowbite-vue'
136+
137+
const selected = ref('')
138+
const countries = [
139+
{ value: 'us', name: 'United States' },
140+
{ value: 'ca', name: 'Canada' },
141+
{ value: 'fr', name: 'France' },
142+
]
143+
</script>
144+
74145
```
75146

76-
<SelectSize />
147+
<SelectSize />

‎docs/components/select/examples/DisabledSelect.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div>
3-
<select
2+
<div class="vp-raw">
3+
<fwb-select
44
v-model="selected"
55
:options="countries"
66
placeholder="You can't select"
@@ -12,7 +12,7 @@
1212

1313
<script setup>
1414
import { ref } from 'vue'
15-
import { Select } from '../../../../src/index'
15+
import { FwbSelect } from '../../../../src/index'
1616
1717
const selected = ref('')
1818
const countries = [

‎docs/components/select/examples/SelectExample.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div>
3-
<select
2+
<div class="vp-raw">
3+
<fwb-select
44
v-model="selected"
55
:options="countries"
66
label="Select a country"
@@ -10,7 +10,7 @@
1010

1111
<script setup>
1212
import { ref } from 'vue'
13-
import { Select } from '../../../../src/index'
13+
import { FwbSelect } from '../../../../src/index'
1414
1515
const selected = ref('')
1616
const countries = [

‎docs/components/select/examples/SelectSize.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<template>
2-
<div class="flex flex-col gap-2">
3-
<select
2+
<div class="flex flex-col gap-2 vp-raw">
3+
<fwb-select
44
v-model="selected"
55
:options="countries"
66
label="Select a country"
77
size="lg"
88
/>
9-
<select
9+
<fwb-select
1010
v-model="selected"
1111
:options="countries"
1212
label="Select a country"
1313
size="md"
1414
/>
15-
<select
15+
<fwb-select
1616
v-model="selected"
1717
:options="countries"
1818
label="Select a country"
@@ -23,7 +23,7 @@
2323

2424
<script setup>
2525
import { ref } from 'vue'
26-
import { Select } from '../../../../src/index'
26+
import { FwbSelect } from '../../../../src/index'
2727
2828
const selected = ref('')
2929
const countries = [

‎docs/components/select/examples/UnderlinedSelect.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div>
3-
<select
2+
<div class="vp-raw">
3+
<fwb-select
44
v-model="selected"
55
:options="countries"
66
label="Select a country"
@@ -11,7 +11,7 @@
1111

1212
<script setup>
1313
import { ref } from 'vue'
14-
import { Select } from '../../../../src/index'
14+
import { FwbSelect } from '../../../../src/index'
1515
1616
const selected = ref('')
1717
const countries = [

‎src/components/FwbSelect/FwbSelect.vue‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<template>
2+
<label>
3+
<span
4+
v-if="label"
5+
:class="labelClasses"
6+
>
7+
{{ label }}
8+
</span>
9+
<select
10+
v-model="model"
11+
:disabled="disabled"
12+
:class="selectClasses"
13+
>
14+
<option
15+
disabled
16+
selected
17+
value=""
18+
>
19+
{{ placeholder }}
20+
</option>
21+
<option
22+
v-for="(option, index) in options"
23+
:key="index"
24+
:value="option.value"
25+
>
26+
{{ option.name }}
27+
</option>
28+
</select>
29+
</label>
30+
</template>
31+
32+
<script lang="ts" setup>
33+
import type { InputSize } from './../FwbInput/types'
34+
import type { OptionsType } from './types'
35+
import { computed } from 'vue'
36+
import { useVModel } from '@vueuse/core'
37+
import { twMerge } from 'tailwind-merge'
38+
39+
interface InputProps {
40+
modelValue?: string;
41+
label?: string;
42+
options?: OptionsType[];
43+
placeholder?: string;
44+
disabled?: boolean;
45+
underline?: boolean;
46+
size?: InputSize;
47+
}
48+
const props = withDefaults(defineProps<InputProps>(), {
49+
modelValue: '',
50+
label: '',
51+
options: () => [],
52+
placeholder: 'Please select one',
53+
disabled: false,
54+
underline: false,
55+
size: 'md',
56+
})
57+
const emit = defineEmits(['update:modelValue'])
58+
59+
const model = useVModel(props, 'modelValue', emit)
60+
61+
// LABEL
62+
const defaultLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
63+
64+
// SELECT
65+
const defaultSelectClasses = 'w-full text-gray-900 bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500'
66+
const disabledSelectClasses = 'cursor-not-allowed bg-gray-100'
67+
const underlineSelectClasses = 'bg-transparent dark:bg-transparent border-b-2 border-gray-200 appearance-none dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer'
68+
const selectSizeClasses: Record<InputSize, string> = {
69+
lg: 'p-4',
70+
md: 'p-2.5 text-sm',
71+
sm: 'p-2 text-sm',
72+
}
73+
74+
const selectClasses = computed(() => {
75+
return twMerge(
76+
defaultSelectClasses,
77+
selectSizeClasses[props.size],
78+
props.disabled && disabledSelectClasses,
79+
props.underline ? underlineSelectClasses : 'border border-gray-300 rounded-lg',
80+
)
81+
})
82+
83+
const labelClasses = computed(() => {
84+
return defaultLabelClasses
85+
})
86+
</script>

‎src/components/Select/types.ts‎ renamed to ‎src/components/FwbSelect/types.ts‎

File renamed without changes.

‎src/components/Select/Select.vue‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

0 commit comments

Comments
 (0)