✨ Add Select component

Author: Frontendland

.vscode/tasks.json

@@ -0,0 +1,29 @@
+// Tasks - https://code.visualstudio.com/docs/editor/tasks#vscode
+// Vars  - https://code.visualstudio.com/docs/editor/variables-reference
+{
+    "version": "2.0.0",
+    "type": "shell",
+    "tasks": [
+        {
+            "label": "🔍 Develop",
+            "command": "npm run develop",
+        },
+        {
+            "label": "🛠️ Build",
+            "command": "npm run build:package"
+        },
+        {
+            "label": "📥 Git fetch && pull",
+            "command": "git fetch && git pull"
+        },
+        {
+            "label": "✔️ Check TypeScript Errors",
+            "command": "tsc",
+        },
+        {
+            "label": "✔️🎯 Check TypeScript for Current",
+            "command": "tsc ${relativeFile}",
+        }
+    ]
+  }
+  

README.md

@@ -212,6 +212,7 @@ import { Accordion } from 'webcoreui/react'
 - [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
+- [Select](https://github.com/Frontendland/webcoreui/tree/main/src/components/Select)
 - [Sheet](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sheet)
 - [Slider](https://github.com/Frontendland/webcoreui/tree/main/src/components/Slider)
 - [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)

scripts/buildTypes.js

@@ -28,8 +28,9 @@ const buildTypes = type => {
                 'Input',
                 'List',
                 'Radio',
-                'Switch',
+                'Select',
                 'Slider',
+                'Switch',
                 'Textarea'
             ]
 

src/components/Input/Input.astro

@@ -12,6 +12,7 @@ const {
     label,
     subText,
     className,
+    labelClassName,
     ...rest
 } = Astro.props
 
@@ -21,11 +22,16 @@ const classes = [
     className
 ]
 
+const labelClasses = [
+    styles['input-label'],
+    labelClassName
+]
+
 const useLabel = !!(label || subText || Astro.slots.has('default'))
 ---
 
 <ConditionalWrapper condition={useLabel}>
-    <label slot="wrapper" class={styles['input-label']}>
+    <label slot="wrapper" class:list={labelClasses}>
         {label && (
             <div class={styles.label}>{label}</div>
         )}

src/components/Input/Input.svelte

@@ -10,23 +10,30 @@
     export let label: SvelteInputProps['label'] = ''
     export let subText: SvelteInputProps['subText'] = ''
     export let className: SvelteInputProps['className'] = ''
+    export let labelClassName: SvelteInputProps['labelClassName'] = ''
     export let onChange: SvelteInputProps['onChange'] = () => {}
     export let onKeyUp: SvelteInputProps['onKeyUp'] = () => {}
     export let onInput: SvelteInputProps['onInput'] = () => {}
+    export let onClick: SvelteInputProps['onClick'] = () => {}
 
     const classes = classNames([
         styles.input,
         theme && styles[theme],
         className
     ])
 
+    const labelClasses = classNames([
+        styles['input-label'],
+        labelClassName
+    ])
+
     const useLabel = !!(label || subText || $$slots.default)
 </script>
 
 <ConditionalWrapper
     condition={useLabel}
     element="label"
-    class={styles['input-label']}
+    class={labelClasses}
 >
     {#if label}
         <div class={styles.label}>{label}</div>
@@ -43,6 +50,7 @@
             on:change={onChange}
             on:keyup={onKeyUp}
             on:input={onInput}
+            on:click={onClick}
             {...$$restProps}
         />
     </ConditionalWrapper>

src/components/Input/Input.tsx

@@ -12,6 +12,7 @@ const Input = ({
     subText,
     value,
     className,
+    labelClassName,
     children,
     ...rest
 }: ReactInputProps) => {
@@ -21,11 +22,16 @@ const Input = ({
         className
     ])
 
+    const labelClasses = classNames([
+        styles['input-label'],
+        labelClassName
+    ])
+
     const useLabel = !!(label || subText || children)
 
     return (
         <ConditionalWrapper condition={useLabel} wrapper={children => (
-            <label className={styles['input-label']}>
+            <label className={labelClasses}>
                 {children}
             </label>
         )}>

src/components/Input/input.ts

@@ -35,18 +35,21 @@ export type InputProps = {
     autofocus?: boolean
     autocomplete?: 'on' | 'off'
     className?: string
+    labelClassName?: string
     [key: string]: any
 }
 
 export type SvelteInputProps = {
-    onChange?: (e: any) => any
-    onKeyUp?: (e: any) => any
-    onInput?: (e: any) => any
+    onChange?: (event: Event & { currentTarget: HTMLInputElement }) => void
+    onKeyUp?: (event: KeyboardEvent & { currentTarget: HTMLInputElement }) => void
+    onInput?: (event: any) => void
+    onClick?: (event: MouseEvent & { currentTarget: HTMLInputElement }) => void
 } & InputProps
 
 export type ReactInputProps = {
-    onChange?: (e: any) => any
-    onKeyUp?: (e: any) => any
-    onInput?: (e: any) => any
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+    onInput?: (event: React.FormEvent<HTMLInputElement>) => void
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
     children?: React.ReactNode
 } & InputProps

src/components/List/List.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { SvelteListProps } from './list'
+    import type { SvelteListProps, ListEventType } from './list'
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
     import Input from '../Input/Input.svelte'
 
@@ -32,7 +32,7 @@
         wrapperClassName
     ])
 
-    const search = (event: KeyboardEvent) => {
+    const search = (event: InputEvent) => {
         searchValue = (event.target as HTMLInputElement).value
 
         numberOfResults = itemGroups
@@ -61,7 +61,7 @@
         onSelect?.({
             ...li.dataset,
             list: li.parentElement
-        })
+        } as ListEventType)
     }
 
     const selectByKey = (event: KeyboardEvent) => {

src/components/List/List.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import type { ReactListProps } from './list'
+import type { ReactListProps, ListEventType } from './list'
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 import Input from '../Input/Input.tsx'
 
@@ -21,6 +21,7 @@ const List = ({
 }: ReactListProps) => {
     const [searchValue, setSearchValue] = useState('')
     const [numberOfResults, setNumberOfResults] = useState(1)
+    const [itemGroupsWithActive, setItemGroups] = useState(itemGroups)
 
     const classes = classNames([
         styles.list,
@@ -37,7 +38,7 @@ const List = ({
         ? { maxHeight } as React.CSSProperties
         : undefined
 
-    const search = (event: KeyboardEvent) => {
+    const search = (event: React.FormEvent<HTMLInputElement>) => {
         const value = (event.target as HTMLInputElement).value
 
         setSearchValue(value)
@@ -58,20 +59,29 @@ const List = ({
     const select = (event: any) => {
         const li = event.target as HTMLLIElement
 
-        itemGroups = itemGroups.map(group => {
-            group.items = group.items.map(item => {
-                item.selected = li.dataset.name === item.name
-
-                return item
+        setItemGroups(
+            itemGroupsWithActive.map(group => {
+                return {
+                    ...group,
+                    items: group.items.map(item => {    
+                        return {
+                            ...item,
+                            selected: li.dataset.name === item.name
+                        }
+                    })
+                }
             })
+        )
 
-            return group
+        console.log({
+            ...li.dataset,
+            list: li.parentElement
         })
 
         onSelect?.({
             ...li.dataset,
             list: li.parentElement
-        })
+        } as ListEventType)
     }
 
     const selectByKey = (event: any) => {
@@ -98,8 +108,8 @@ const List = ({
                 {children}
             </div>
         )}>
-            <ul className={classes} id={id} data-id="w-list" style={style}>
-                {itemGroups.map((group: ReactListProps['itemGroups'][0], index) => (
+            <ul className={classes} id={id} style={style}>
+                {itemGroupsWithActive.map((group: ReactListProps['itemGroups'][0], index) => (
                     <React.Fragment key={index}>
                         {group.title && (
                             <li className={styles.title}
@@ -136,7 +146,12 @@ const List = ({
                                     <ConditionalWrapper condition={!!(item.icon && item.subText)} wrapper={children => (
                                         <div>{children}</div>
                                     )}>
-                                        {item.icon && <span dangerouslySetInnerHTML={{ __html: item.icon }} />}
+                                        {item.icon && (
+                                            <span
+                                                dangerouslySetInnerHTML={{ __html: item.icon }}
+                                                style={{ height: '18px' }}
+                                            />
+                                        )}
                                         {item.name}
                                     </ConditionalWrapper>
                                     {item.subText && <span>{item.subText}</span>}

src/components/List/list.ts

@@ -1,3 +1,9 @@
+export type ListEventType = {
+    value: string
+    name: string
+    list: HTMLUListElement
+}
+
 export type ListProps = {
     showSearchBar?: boolean
     showSearchBarIcon?: boolean
@@ -23,9 +29,9 @@ export type ListProps = {
 }
 
 export type SvelteListProps = {
-    onSelect?: (key: any) => any
+    onSelect?: (event: ListEventType) => void
 } & ListProps
 
 export type ReactListProps = {
-    onSelect?: (key: any) => any
+    onSelect?: (event: ListEventType) => void
 } & ListProps