Skip to content

Commit 7c84dcb

Browse files
FrontendlandFrontendland
committed
✨ Add Select component
1 parent 4f5b3c3 commit 7c84dcb

31 files changed

+736
-43
lines changed

‎.vscode/tasks.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// Tasks - https://code.visualstudio.com/docs/editor/tasks#vscode
2+
// Vars - https://code.visualstudio.com/docs/editor/variables-reference
3+
{
4+
"version": "2.0.0",
5+
"type": "shell",
6+
"tasks": [
7+
{
8+
"label": "🔍 Develop",
9+
"command": "npm run develop",
10+
},
11+
{
12+
"label": "🛠️ Build",
13+
"command": "npm run build:package"
14+
},
15+
{
16+
"label": "📥 Git fetch && pull",
17+
"command": "git fetch && git pull"
18+
},
19+
{
20+
"label": "✔️ Check TypeScript Errors",
21+
"command": "tsc",
22+
},
23+
{
24+
"label": "✔️🎯 Check TypeScript for Current",
25+
"command": "tsc ${relativeFile}",
26+
}
27+
]
28+
}
29+

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,7 @@ import { Accordion } from 'webcoreui/react'
212212
- [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
213213
- [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
214214
- [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
215+
- [Select](https://github.com/Frontendland/webcoreui/tree/main/src/components/Select)
215216
- [Sheet](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sheet)
216217
- [Slider](https://github.com/Frontendland/webcoreui/tree/main/src/components/Slider)
217218
- [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)

‎scripts/buildTypes.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@ const buildTypes = type => {
2828
'Input',
2929
'List',
3030
'Radio',
31-
'Switch',
31+
'Select',
3232
'Slider',
33+
'Switch',
3334
'Textarea'
3435
]
3536

‎src/components/Input/Input.astro

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const {
1212
label,
1313
subText,
1414
className,
15+
labelClassName,
1516
...rest
1617
} = Astro.props
1718
@@ -21,11 +22,16 @@ const classes = [
2122
className
2223
]
2324
25+
const labelClasses = [
26+
styles['input-label'],
27+
labelClassName
28+
]
29+
2430
const useLabel = !!(label || subText || Astro.slots.has('default'))
2531
---
2632

2733
<ConditionalWrapper condition={useLabel}>
28-
<label slot="wrapper" class={styles['input-label']}>
34+
<label slot="wrapper" class:list={labelClasses}>
2935
{label && (
3036
<div class={styles.label}>{label}</div>
3137
)}

‎src/components/Input/Input.svelte

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,30 @@
1010
export let label: SvelteInputProps['label'] = ''
1111
export let subText: SvelteInputProps['subText'] = ''
1212
export let className: SvelteInputProps['className'] = ''
13+
export let labelClassName: SvelteInputProps['labelClassName'] = ''
1314
export let onChange: SvelteInputProps['onChange'] = () => {}
1415
export let onKeyUp: SvelteInputProps['onKeyUp'] = () => {}
1516
export let onInput: SvelteInputProps['onInput'] = () => {}
17+
export let onClick: SvelteInputProps['onClick'] = () => {}
1618
1719
const classes = classNames([
1820
styles.input,
1921
theme && styles[theme],
2022
className
2123
])
2224
25+
const labelClasses = classNames([
26+
styles['input-label'],
27+
labelClassName
28+
])
29+
2330
const useLabel = !!(label || subText || $$slots.default)
2431
</script>
2532

2633
<ConditionalWrapper
2734
condition={useLabel}
2835
element="label"
29-
class={styles['input-label']}
36+
class={labelClasses}
3037
>
3138
{#if label}
3239
<div class={styles.label}>{label}</div>
@@ -43,6 +50,7 @@
4350
on:change={onChange}
4451
on:keyup={onKeyUp}
4552
on:input={onInput}
53+
on:click={onClick}
4654
{...$$restProps}
4755
/>
4856
</ConditionalWrapper>

‎src/components/Input/Input.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const Input = ({
1212
subText,
1313
value,
1414
className,
15+
labelClassName,
1516
children,
1617
...rest
1718
}: ReactInputProps) => {
@@ -21,11 +22,16 @@ const Input = ({
2122
className
2223
])
2324

25+
const labelClasses = classNames([
26+
styles['input-label'],
27+
labelClassName
28+
])
29+
2430
const useLabel = !!(label || subText || children)
2531

2632
return (
2733
<ConditionalWrapper condition={useLabel} wrapper={children => (
28-
<label className={styles['input-label']}>
34+
<label className={labelClasses}>
2935
{children}
3036
</label>
3137
)}>

‎src/components/Input/input.ts

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,18 +35,21 @@ export type InputProps = {
3535
autofocus?: boolean
3636
autocomplete?: 'on' | 'off'
3737
className?: string
38+
labelClassName?: string
3839
[key: string]: any
3940
}
4041

4142
export type SvelteInputProps = {
42-
onChange?: (e: any) => any
43-
onKeyUp?: (e: any) => any
44-
onInput?: (e: any) => any
43+
onChange?: (event: Event & { currentTarget: HTMLInputElement }) => void
44+
onKeyUp?: (event: KeyboardEvent & { currentTarget: HTMLInputElement }) => void
45+
onInput?: (event: any) => void
46+
onClick?: (event: MouseEvent & { currentTarget: HTMLInputElement }) => void
4547
} & InputProps
4648

4749
export type ReactInputProps = {
48-
onChange?: (e: any) => any
49-
onKeyUp?: (e: any) => any
50-
onInput?: (e: any) => any
50+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
51+
onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void
52+
onInput?: (event: React.FormEvent<HTMLInputElement>) => void
53+
onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
5154
children?: React.ReactNode
5255
} & InputProps

‎src/components/List/List.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import type { SvelteListProps } from './list'
2+
import type { SvelteListProps, ListEventType } from './list'
33
import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
44
import Input from '../Input/Input.svelte'
55
@@ -32,7 +32,7 @@
3232
wrapperClassName
3333
])
3434
35-
const search = (event: KeyboardEvent) => {
35+
const search = (event: InputEvent) => {
3636
searchValue = (event.target as HTMLInputElement).value
3737
3838
numberOfResults = itemGroups
@@ -61,7 +61,7 @@
6161
onSelect?.({
6262
...li.dataset,
6363
list: li.parentElement
64-
})
64+
} as ListEventType)
6565
}
6666
6767
const selectByKey = (event: KeyboardEvent) => {

‎src/components/List/List.tsx

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react'
2-
import type { ReactListProps } from './list'
2+
import type { ReactListProps, ListEventType } from './list'
33
import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
44
import Input from '../Input/Input.tsx'
55

@@ -21,6 +21,7 @@ const List = ({
2121
}: ReactListProps) => {
2222
const [searchValue, setSearchValue] = useState('')
2323
const [numberOfResults, setNumberOfResults] = useState(1)
24+
const [itemGroupsWithActive, setItemGroups] = useState(itemGroups)
2425

2526
const classes = classNames([
2627
styles.list,
@@ -37,7 +38,7 @@ const List = ({
3738
? { maxHeight } as React.CSSProperties
3839
: undefined
3940

40-
const search = (event: KeyboardEvent) => {
41+
const search = (event: React.FormEvent<HTMLInputElement>) => {
4142
const value = (event.target as HTMLInputElement).value
4243

4344
setSearchValue(value)
@@ -58,20 +59,29 @@ const List = ({
5859
const select = (event: any) => {
5960
const li = event.target as HTMLLIElement
6061

61-
itemGroups = itemGroups.map(group => {
62-
group.items = group.items.map(item => {
63-
item.selected = li.dataset.name === item.name
64-
65-
return item
62+
setItemGroups(
63+
itemGroupsWithActive.map(group => {
64+
return {
65+
...group,
66+
items: group.items.map(item => {
67+
return {
68+
...item,
69+
selected: li.dataset.name === item.name
70+
}
71+
})
72+
}
6673
})
74+
)
6775

68-
return group
76+
console.log({
77+
...li.dataset,
78+
list: li.parentElement
6979
})
7080

7181
onSelect?.({
7282
...li.dataset,
7383
list: li.parentElement
74-
})
84+
} as ListEventType)
7585
}
7686

7787
const selectByKey = (event: any) => {
@@ -98,8 +108,8 @@ const List = ({
98108
{children}
99109
</div>
100110
)}>
101-
<ul className={classes} id={id} data-id="w-list" style={style}>
102-
{itemGroups.map((group: ReactListProps['itemGroups'][0], index) => (
111+
<ul className={classes} id={id} style={style}>
112+
{itemGroupsWithActive.map((group: ReactListProps['itemGroups'][0], index) => (
103113
<React.Fragment key={index}>
104114
{group.title && (
105115
<li className={styles.title}
@@ -136,7 +146,12 @@ const List = ({
136146
<ConditionalWrapper condition={!!(item.icon && item.subText)} wrapper={children => (
137147
<div>{children}</div>
138148
)}>
139-
{item.icon && <span dangerouslySetInnerHTML={{ __html: item.icon }} />}
149+
{item.icon && (
150+
<span
151+
dangerouslySetInnerHTML={{ __html: item.icon }}
152+
style={{ height: '18px' }}
153+
/>
154+
)}
140155
{item.name}
141156
</ConditionalWrapper>
142157
{item.subText && <span>{item.subText}</span>}

‎src/components/List/list.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
export type ListEventType = {
2+
value: string
3+
name: string
4+
list: HTMLUListElement
5+
}
6+
17
export type ListProps = {
28
showSearchBar?: boolean
39
showSearchBarIcon?: boolean
@@ -23,9 +29,9 @@ export type ListProps = {
2329
}
2430

2531
export type SvelteListProps = {
26-
onSelect?: (key: any) => any
32+
onSelect?: (event: ListEventType) => void
2733
} & ListProps
2834

2935
export type ReactListProps = {
30-
onSelect?: (key: any) => any
36+
onSelect?: (event: ListEventType) => void
3137
} & ListProps

‎src/components/Modal/Modal.astro

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ const {
2828
closeOnOverlay = true,
2929
theme,
3030
id,
31-
className
31+
className,
32+
...rest
3233
} = Astro.props
3334
3435
const close = [
@@ -48,6 +49,7 @@ const classes = [
4849
class:list={classes}
4950
id={id}
5051
data-close={close.length ? close : undefined}
52+
{...rest}
5153
>
5254
{showCloseIcon && (
5355
<Button

‎src/components/Modal/Modal.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
class={classes}
4646
id={id}
4747
data-close={close.length ? close : undefined}
48+
{...$$restProps}
4849
>
4950
{#if showCloseIcon}
5051
<Button

‎src/components/Modal/Modal.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ const Modal = ({
2828
theme,
2929
id,
3030
className,
31-
children
31+
children,
32+
...rest
3233
}: ReactModalProps) => {
3334
const classes = classNames([
3435
styles.modal,
@@ -48,6 +49,7 @@ const Modal = ({
4849
className={classes}
4950
id={id}
5051
data-close={close.length ? close : undefined}
52+
{...rest}
5153
>
5254
{showCloseIcon && (
5355
<Button

‎src/components/Modal/modal.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export type ModalProps = {
1111
| 'warning'
1212
| 'alert'
1313
| null
14+
[key: string]: any
1415
}
1516

1617
export type ReactModalProps = {

‎src/components/Popover/Popover.astro

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ interface Props extends PopoverProps {}
66
77
const {
88
id,
9-
className
9+
className,
10+
...rest
1011
} = Astro.props
1112
1213
const classes = [
@@ -18,6 +19,7 @@ const classes = [
1819
<dialog
1920
class:list={classes}
2021
id={id}
22+
{...rest}
2123
>
2224
<slot />
2325
</dialog>

‎src/components/Popover/Popover.svelte

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515

1616
<dialog
1717
class={classes}
18-
id={id}
18+
id={id || null}
19+
{...$$restProps}
1920
>
2021
<slot />
2122
</dialog>

0 commit comments

Comments
 (0)