uibee 2.7.5 → 2.7.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useEffect } from 'react';
|
|
4
|
+
import Image from 'next/image';
|
|
4
5
|
import { useClickOutside } from '../../hooks';
|
|
5
6
|
import { ChevronDown, X } from 'lucide-react';
|
|
6
7
|
import { FieldWrapper } from './shared';
|
|
@@ -39,7 +40,7 @@ export default function Select({ label, name, value, onChange, options, error, c
|
|
|
39
40
|
flex items-center justify-between
|
|
40
41
|
${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
|
|
41
42
|
${!selectedOption ? 'text-login-200' : ''}
|
|
42
|
-
`, title: label, children: [_jsx("span", { className: 'truncate', children: selectedOption ? selectedOption.label : placeholder }), _jsxs("div", { className: 'absolute inset-y-0 right-0 flex items-center px-2 gap-1', children: [clearable && selectedOption && !disabled && (_jsx("div", { role: 'button', onClick: handleClear, className: `
|
|
43
|
+
`, title: label, children: [_jsxs("div", { className: 'flex items-center gap-2 truncate', children: [selectedOption?.image && (_jsx(Image, { src: selectedOption.image, alt: '', width: 30, height: 20, className: 'rounded-xs object-cover shrink-0' })), _jsx("span", { className: 'truncate', children: selectedOption ? selectedOption.label : placeholder })] }), _jsxs("div", { className: 'absolute inset-y-0 right-0 flex items-center px-2 gap-1', children: [clearable && selectedOption && !disabled && (_jsx("div", { role: 'button', onClick: handleClear, className: `
|
|
43
44
|
p-1 hover:bg-login-500 rounded-full text-login-200
|
|
44
45
|
hover:text-red-400 transition-colors cursor-pointer
|
|
45
46
|
`, title: 'Clear selection', children: _jsx(X, { className: 'w-3 h-3' }) })), _jsx("div", { className: `
|
|
@@ -49,9 +50,10 @@ export default function Select({ label, name, value, onChange, options, error, c
|
|
|
49
50
|
`, children: _jsx(ChevronDown, { className: 'w-4 h-4' }) })] })] }), isOpen && (_jsx("div", { className: `
|
|
50
51
|
absolute z-50 w-full mt-1 bg-login-600 border border-login-500
|
|
51
52
|
rounded-md shadow-lg max-h-60 overflow-auto noscroll
|
|
52
|
-
`, children: options.length > 0 ? (_jsx("ul", { className: 'py-1', role: 'listbox', children: options.map((option) => (_jsx("li", { role: 'option', "aria-selected": selectedOption?.value === option.value, children:
|
|
53
|
+
`, children: options.length > 0 ? (_jsx("ul", { className: 'py-1', role: 'listbox', children: options.map((option) => (_jsx("li", { role: 'option', "aria-selected": selectedOption?.value === option.value, children: _jsxs("button", { type: 'button', onClick: () => handleSelect(option), className: `
|
|
53
54
|
w-full text-left px-3 py-2 text-sm
|
|
54
55
|
hover:bg-login-500 transition-colors duration-150
|
|
56
|
+
flex items-center gap-2
|
|
55
57
|
${selectedOption?.value === option.value ? 'bg-login-500 text-login' : 'text-login-text'}
|
|
56
|
-
`, children: option.label }) }, option.value))) })) : (_jsx("div", { className: 'px-3 py-2 text-sm text-login-200', children: "No options available" })) }))] }), _jsx("input", { type: 'hidden', name: name, value: selectedOption?.value || '', required: required })] }));
|
|
58
|
+
`, children: [option.image && (_jsx(Image, { src: option.image, alt: '', width: 75, height: 25, className: 'rounded-md object-cover shrink-0' })), _jsx("span", { className: 'truncate', children: option.label })] }) }, option.value))) })) : (_jsx("div", { className: 'px-3 py-2 text-sm text-login-200', children: "No options available" })) }))] }), _jsx("input", { type: 'hidden', name: name, value: selectedOption?.value || '', required: required })] }));
|
|
57
59
|
}
|
package/dist/src/globals.css
CHANGED
|
@@ -41,6 +41,7 @@
|
|
|
41
41
|
--font-weight-bold: 700;
|
|
42
42
|
--font-weight-extrabold: 800;
|
|
43
43
|
--tracking-tight: -0.025em;
|
|
44
|
+
--radius-xs: 0.125rem;
|
|
44
45
|
--radius-md: 0.375rem;
|
|
45
46
|
--radius-lg: 0.5rem;
|
|
46
47
|
--radius-xl: 0.75rem;
|
|
@@ -710,6 +711,9 @@
|
|
|
710
711
|
.rounded-xl {
|
|
711
712
|
border-radius: var(--radius-xl);
|
|
712
713
|
}
|
|
714
|
+
.rounded-xs {
|
|
715
|
+
border-radius: var(--radius-xs);
|
|
716
|
+
}
|
|
713
717
|
.border {
|
|
714
718
|
border-style: var(--tw-border-style);
|
|
715
719
|
border-width: 1px;
|
|
@@ -835,6 +839,9 @@
|
|
|
835
839
|
.object-contain {
|
|
836
840
|
object-fit: contain;
|
|
837
841
|
}
|
|
842
|
+
.object-cover {
|
|
843
|
+
object-fit: cover;
|
|
844
|
+
}
|
|
838
845
|
.p-1 {
|
|
839
846
|
padding: calc(var(--spacing) * 1);
|
|
840
847
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use client'
|
|
2
2
|
|
|
3
3
|
import { useState, useEffect } from 'react'
|
|
4
|
+
import Image from 'next/image'
|
|
4
5
|
import { useClickOutside } from '../../hooks'
|
|
5
6
|
import { ChevronDown, X } from 'lucide-react'
|
|
6
7
|
import { FieldWrapper } from './shared'
|
|
@@ -8,6 +9,7 @@ import { FieldWrapper } from './shared'
|
|
|
8
9
|
export type Option = {
|
|
9
10
|
value: string | number
|
|
10
11
|
label: string
|
|
12
|
+
image?: string
|
|
11
13
|
}
|
|
12
14
|
|
|
13
15
|
export type SelectProps = {
|
|
@@ -98,9 +100,20 @@ export default function Select({
|
|
|
98
100
|
`}
|
|
99
101
|
title={label}
|
|
100
102
|
>
|
|
101
|
-
<
|
|
102
|
-
{selectedOption
|
|
103
|
-
|
|
103
|
+
<div className='flex items-center gap-2 truncate'>
|
|
104
|
+
{selectedOption?.image && (
|
|
105
|
+
<Image
|
|
106
|
+
src={selectedOption.image}
|
|
107
|
+
alt=''
|
|
108
|
+
width={30}
|
|
109
|
+
height={20}
|
|
110
|
+
className='rounded-xs object-cover shrink-0'
|
|
111
|
+
/>
|
|
112
|
+
)}
|
|
113
|
+
<span className='truncate'>
|
|
114
|
+
{selectedOption ? selectedOption.label : placeholder}
|
|
115
|
+
</span>
|
|
116
|
+
</div>
|
|
104
117
|
<div className='absolute inset-y-0 right-0 flex items-center px-2 gap-1'>
|
|
105
118
|
{clearable && selectedOption && !disabled && (
|
|
106
119
|
<div
|
|
@@ -140,10 +153,20 @@ export default function Select({
|
|
|
140
153
|
className={`
|
|
141
154
|
w-full text-left px-3 py-2 text-sm
|
|
142
155
|
hover:bg-login-500 transition-colors duration-150
|
|
156
|
+
flex items-center gap-2
|
|
143
157
|
${selectedOption?.value === option.value ? 'bg-login-500 text-login' : 'text-login-text'}
|
|
144
158
|
`}
|
|
145
159
|
>
|
|
146
|
-
{option.
|
|
160
|
+
{option.image && (
|
|
161
|
+
<Image
|
|
162
|
+
src={option.image}
|
|
163
|
+
alt=''
|
|
164
|
+
width={75}
|
|
165
|
+
height={25}
|
|
166
|
+
className='rounded-md object-cover shrink-0'
|
|
167
|
+
/>
|
|
168
|
+
)}
|
|
169
|
+
<span className='truncate'>{option.label}</span>
|
|
147
170
|
</button>
|
|
148
171
|
</li>
|
|
149
172
|
))}
|