webcoreui 0.3.0 → 0.4.0

package/components/Radio/Radio.astro

@@ -1,5 +1,6 @@
 ---
 import type { RadioProps } from './radio'
+
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
 import styles from './radio.module.scss'

package/components/Radio/Radio.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
     import type { SvelteRadioProps } from './radio'
+
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
-    import styles from './radio.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './radio.module.scss'
+
     export let name: SvelteRadioProps['name'] = ''
     export let items: SvelteRadioProps['items'] = []
-    export let color: SvelteRadioProps['color'] =  ''
+    export let color: SvelteRadioProps['color'] = ''
     export let inline: SvelteRadioProps['inline'] = false
     export let className: SvelteRadioProps['className'] = ''
     export let onChange: SvelteRadioProps['onChange'] = () => {}

package/components/Radio/Radio.tsx

@@ -3,9 +3,10 @@ import type { ReactRadioProps } from './radio'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
-import styles from './radio.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './radio.module.scss'
+
 const Radio = ({
     name,
     items,
@@ -19,7 +20,7 @@ const Radio = ({
         inline && styles.inline,
         className
     ])
-    
+
     const style = color
         ? { '--w-radio-color': color } as React.CSSProperties
         : undefined

package/components/Rating/Rating.astro

@@ -1,10 +1,12 @@
 ---
 import type { RatingProps } from './rating'
+
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
-import styles from './rating.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './rating.module.scss'
+
 interface Props extends RatingProps {}
 
 const {

package/components/Rating/Rating.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
     import type { RatingProps } from './rating'
+
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
-    
-    import styles from './rating.module.scss'
+
     import { classNames } from '../../utils/classNames'
-    
+
+    import styles from './rating.module.scss'
+
     export let score: RatingProps['score']
     export let total: RatingProps['total'] = 5
     export let showText: RatingProps['showText'] = false
@@ -19,23 +21,23 @@
     export let emptyColor: RatingProps['emptyColor'] = ''
     export let size: RatingProps['size'] = 0
     export let className: RatingProps['className'] = ''
-    
+
     const classes = classNames([
         styles.rating,
         outline && styles.outline,
         className
     ])
-    
+
     const styleVariables = classNames([
         color && `--w-rating-color: ${color};`,
         size && `--w-rating-size: ${size}px;`,
         emptyColor && `--w-rating-empty-color: ${emptyColor};`
     ])
-    
+
     const translatedText = text!
         .replace('{0}', `${score}`)
         .replace('{1}', `${total}`)
-    
+
     const translatedReviewText = reviewText?.replace('{0}', `${reviewCount}`)
 </script>
 

package/components/Rating/Rating.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import type { RatingProps } from './rating'
+
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
-import styles from './rating.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './rating.module.scss'
+
 const Rating = ({
     score,
     total = 5,
@@ -32,7 +34,7 @@ const Rating = ({
         ...(size && { '--w-rating-size': `${size}px` }),
         ...(emptyColor && { '--w-rating-empty-color': emptyColor })
     } as React.CSSProperties
- 
+
     const translatedText = text
         .replace('{0}', `${score}`)
         .replace('{1}', `${total}`)

package/components/Select/Select.astro

@@ -0,0 +1,135 @@
+---
+import type { SelectProps } from './select'
+
+import Input from '../Input/Input.astro'
+import List from '../List/List.astro'
+import Modal from '../Modal/Modal.astro'
+import Popover from '../Popover/Popover.astro'
+
+import { classNames } from '../../utils/classNames'
+
+import ArrowDown from '../../icons/arrow-down.svg?raw'
+
+import styles from './select.module.scss'
+
+interface Props extends SelectProps {}
+
+const {
+    name,
+    value,
+    placeholder,
+    label,
+    subText,
+    disabled,
+    className,
+    position,
+    ...rest
+} = Astro.props
+
+const classes = classNames([
+    styles.select,
+    disabled && styles.disabled,
+    className
+])
+---
+
+<Input
+    type="text"
+    value={value}
+    readonly={true}
+    disabled={disabled}
+    placeholder={placeholder}
+    label={label}
+    subText={subText}
+    data-id={`w-select-${name}`}
+    data-position={position}
+    labelClassName={classes}
+>
+    <Fragment set:html={ArrowDown} />
+</Input>
+{position === 'modal'
+    ? (
+        <Modal
+            className={styles.popover}
+            data-id={`w-options-${name}`}
+            showCloseIcon={false}
+        >
+            <List {...rest} />
+        </Modal>
+    ) : (
+        <Popover className={styles.popover} data-id={`w-options-${name}`}>
+            <List {...rest} />
+        </Popover>
+    )
+}
+
+<script>
+    import { debounce } from '../../utils/debounce'
+    import { dispatch, listen } from '../../utils/event'
+    import { modal } from '../../utils/modal'
+    import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
+
+    const selects = document.querySelectorAll('[data-id^="w-select"]')
+
+    Array.from(selects).forEach(select => {
+        const selectElement = select as HTMLElement
+        const name = selectElement.dataset.id!.split('w-select-')[1]
+        const position = selectElement.dataset.position
+
+        if (position === 'modal') {
+            modal({
+                trigger: `[data-id="${selectElement.dataset.id}"]`,
+                modal: `[data-id="w-options-${name}"]`,
+                onOpen: ({ modal }) => {
+                    const search = modal.querySelector('input')
+
+                    if (search) {
+                        search.focus()
+                    }
+                }
+            })
+        } else {
+            const resize = debounce(() => {
+                const { width } = selectElement.getBoundingClientRect()
+                const dialogElement = document.querySelector(`[data-id="w-options-${name}"]`) as HTMLDialogElement
+
+                if (dialogElement) {
+                    dialogElement.style.width = `${width}px`
+                }
+            })
+
+            new ResizeObserver(() => resize()).observe(document.body)
+
+            popover({
+                trigger: `[data-id="${selectElement.dataset.id}"]`,
+                popover: `[data-id="w-options-${name}"]`,
+                position: position as PopoverPosition || 'bottom',
+                onOpen({ popover }) {
+                    const search = popover.querySelector('input')
+
+                    if (search) {
+                        search.focus()
+                    }
+                }
+            })
+        }
+    })
+
+    listen('listOnSelect', payload => {
+        const { name, list } = payload
+        const dialog = list.closest('dialog')
+        const popoverId = dialog.dataset.id
+        const selectName = popoverId.split('w-options-')[1]
+        const selectId = `[data-id="w-select-${selectName}"]`
+        const selectElement = document.querySelector(selectId) as HTMLInputElement
+
+        closePopover(`[data-id="${popoverId}"]`)
+
+        selectElement.value = name
+
+        dispatch('selectOnChange', {
+            select: selectName,
+            ...payload
+        })
+    })
+</script>

package/components/Select/Select.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import type { SvelteSelectProps } from './select'
+
+    import Input from '../Input/Input.svelte'
+    import List from '../List/List.svelte'
+    import Modal from '../Modal/Modal.svelte'
+    import Popover from '../Popover/Popover.svelte'
+
+    import { classNames } from '../../utils/classNames'
+    import { debounce } from '../../utils/debounce'
+    import { modal } from '../../utils/modal'
+    import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
+
+    import ArrowDown from '../../icons/arrow-down.svg?raw'
+
+    import styles from './select.module.scss'
+
+    export let name: SvelteSelectProps['name'] = ''
+    export let value: SvelteSelectProps['value'] = ''
+    export let placeholder: SvelteSelectProps['placeholder'] = ''
+    export let label: SvelteSelectProps['label'] = ''
+    export let subText: SvelteSelectProps['subText'] = ''
+    export let disabled: SvelteSelectProps['disabled'] = false
+    export let className: SvelteSelectProps['className'] = ''
+    export let position: SvelteSelectProps['position'] = 'bottom'
+    export let onChange: SvelteSelectProps['onChange'] = () => {}
+
+    let popoverInstance: any
+
+    const classes = classNames([
+        styles.select,
+        disabled && styles.disabled,
+        className
+    ])
+
+    const popoverClasses = classNames([
+        `w-options-${name}`,
+        styles.popover
+    ])
+
+    const select = (payload: any) => {
+        closePopover(`.w-options-${name}`)
+
+        value = payload.name
+
+        onChange?.({
+            select: name,
+            ...payload
+        })
+    }
+
+    onMount(() => {
+        if (position === 'modal') {
+            modal({
+                trigger: `.w-select-${name}`,
+                modal: `.w-options-${name}`,
+                onOpen: ({ modal }) => {
+                    const search = modal.querySelector('input')
+
+                    if (search) {
+                        search.focus()
+                    }
+                }
+            })
+        } else {
+            const resize = debounce(() => {
+                const selectElement = document.querySelector(`.w-select-${name}`) as HTMLInputElement
+
+                const { width } = selectElement.getBoundingClientRect()
+                const dialogElement = document.querySelector(`.w-options-${name}`) as HTMLDialogElement
+
+                dialogElement.style.width = `${width}px`
+            })
+
+            new ResizeObserver(() => resize()).observe(document.body)
+
+            popoverInstance = popover({
+                trigger: `.w-select-${name}`,
+                popover: `.w-options-${name}`,
+                position: position as PopoverPosition,
+                onOpen({ popover }) {
+                    const search = popover.querySelector('input')
+
+                    if (search) {
+                        search.focus()
+                    }
+                }
+            })
+        }
+
+        return () => {
+            popoverInstance?.remove()
+        }
+    })
+</script>
+
+<Input
+    type="text"
+    value={value}
+    readonly={true}
+    disabled={disabled}
+    placeholder={placeholder}
+    label={label}
+    subText={subText}
+    className={`w-select-${name}`}
+    labelClassName={classes}
+>
+    {@html ArrowDown}
+</Input>
+{#if position === 'modal'}
+    <Modal
+        className={popoverClasses}
+        showCloseIcon={false}
+    >
+        <List onSelect={select} {...$$restProps} />
+    </Modal>
+{:else}
+    <Popover className={popoverClasses}>
+        <List onSelect={select} {...$$restProps} />
+    </Popover>
+{/if}

package/components/Select/Select.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect,useState } from 'react'
+import type { ReactSelectProps } from './select'
+
+import Input from '../Input/Input.tsx'
+import List from '../List/List.tsx'
+import Modal from '../Modal/Modal.tsx'
+import Popover from '../Popover/Popover.tsx'
+
+import { classNames } from '../../utils/classNames'
+import { debounce } from '../../utils/debounce'
+import { modal } from '../../utils/modal'
+import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
+
+import ArrowDown from '../../icons/arrow-down.svg?raw'
+
+import styles from './select.module.scss'
+
+const Select = ({
+    name,
+    value,
+    placeholder,
+    label,
+    subText,
+    disabled,
+    className,
+    position = 'bottom',
+    onChange,
+    ...rest
+}: ReactSelectProps) => {
+    const [val, setValue] = useState(value)
+
+    const classes = classNames([
+        styles.select,
+        className
+    ])
+
+    const popoverClasses = classNames([
+        `w-options-${name}`,
+        styles.popover
+    ])
+
+    let popoverInstance: any
+
+    const select = (payload: any) => {
+        closePopover(`.w-options-${name}`)
+
+        setValue(payload.name)
+
+        onChange?.({
+            select: name,
+            ...payload
+        })
+    }
+
+    useEffect(() => {
+        if (position === 'modal') {
+            modal({
+                trigger: `.w-select-${name}`,
+                modal: `.w-options-${name}`,
+                onOpen: ({ modal }) => {
+                    const search = modal.querySelector('input')
+
+                    if (search) {
+                        search.focus()
+                    }
+                }
+            })
+        } else {
+            setTimeout(() => {
+                const resize = debounce(() => {
+                    const selectElement = document.querySelector(`.w-select-${name}`) as HTMLInputElement
+
+                    const { width } = selectElement.getBoundingClientRect()
+                    const dialogElement = document.querySelector(`.w-options-${name}`) as HTMLDialogElement
+
+                    dialogElement.style.width = `${width}px`
+                })
+
+                new ResizeObserver(() => resize()).observe(document.body)
+
+                popoverInstance = popover({
+                    trigger: `.w-select-${name}`,
+                    popover: `.w-options-${name}`,
+                    position: position as PopoverPosition,
+                    onOpen({ popover }) {
+                        const search = popover.querySelector('input')
+
+                        if (search) {
+                            search.focus()
+                        }
+                    }
+                })
+            }, 0)
+        }
+
+        return () => {
+            popoverInstance?.remove()
+        }
+    }, [])
+
+    return (
+        <React.Fragment>
+            <Input
+                type="text"
+                value={val}
+                readOnly={true}
+                disabled={disabled}
+                placeholder={placeholder}
+                label={label}
+                subText={subText}
+                className={`w-select-${name}`}
+                labelClassName={classes}
+            >
+                <span
+                    dangerouslySetInnerHTML={{ __html: ArrowDown }}
+                    style={{
+                        height: '18px',
+                        position: 'absolute',
+                        right: 0,
+                        pointerEvents: 'none'
+                    }}
+                />
+            </Input>
+            {position === 'modal'
+                ? (
+                    <Modal
+                        className={popoverClasses}
+                        showCloseIcon={false}
+                    >
+                        <List onSelect={select} {...rest} />
+                    </Modal>
+                ) : (
+                    <Popover className={popoverClasses} isInteractive={true}>
+                        <List onSelect={select} {...rest} />
+                    </Popover>
+                )
+            }
+        </React.Fragment>
+    )
+}
+
+export default Select

package/components/Select/select.module.scss

@@ -0,0 +1,25 @@
+@import '../../scss/config.scss';
+
+.select {
+    svg {
+        @include position(r10px);
+
+        left: auto !important;
+        cursor: pointer;
+    }
+
+    input {
+        cursor: pointer;
+        padding-left: 10px !important;
+        padding-right: 40px;
+    }
+
+    &.disabled svg {
+        cursor: no-drop;
+    }
+}
+
+.popover {
+    padding: 0 !important;
+    border: 0 !important;
+}

package/components/Select/select.ts

@@ -0,0 +1,21 @@
+import type { PopoverPosition } from '../../utils/popover'
+
+import type { ListEventType, ListProps } from '../List/list'
+
+export type SelectProps = {
+    name: string
+    value?: string
+    placeholder?: string
+    label?: string
+    subText?: string
+    disabled?: boolean
+    position?: PopoverPosition | 'modal'
+} & ListProps
+
+export type SvelteSelectProps = {
+    onChange?: (event: ListEventType & { select: string }) => void
+} & SelectProps
+
+export type ReactSelectProps = {
+    onChange?: (event: ListEventType & { select: string }) => void
+} & SelectProps

package/components/Sheet/Sheet.astro

@@ -3,9 +3,10 @@ import type { SheetProps } from './sheet'
 
 import Modal from '../Modal/Modal.astro'
 
-import styles from './sheet.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './sheet.module.scss'
+
 interface Props extends SheetProps {}
 
 const {

package/components/Sheet/Sheet.svelte

@@ -3,9 +3,10 @@
 
     import Modal from '../Modal/Modal.svelte'
 
-    import styles from './sheet.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './sheet.module.scss'
+
     export let position: SheetProps['position'] = null
     export let className: SheetProps['className'] = ''
 

package/components/Sheet/Sheet.tsx

@@ -1,32 +1,33 @@
-import React from 'react'
-import type { ReactSheetProps } from './sheet'
-
-import Modal from '../Modal/Modal.tsx'
-
-import styles from './sheet.module.scss'
-import { classNames } from '../../utils/classNames'
-
-const Sheet = ({
-    position,
-    className,
-    children,
-    ...rest
-}: ReactSheetProps) => {
-    const classes = classNames([
-        styles.sheet,
-        position && styles[position],
-        className
-    ])
-
-    return (
-        <Modal
-            className={classes}
-            {...rest}
-        >
-            {children}
-        </Modal>
-
-    )
-}
-
-export default Sheet
+import React from 'react'
+import type { ReactSheetProps } from './sheet'
+
+import Modal from '../Modal/Modal.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './sheet.module.scss'
+
+const Sheet = ({
+    position,
+    className,
+    children,
+    ...rest
+}: ReactSheetProps) => {
+    const classes = classNames([
+        styles.sheet,
+        position && styles[position],
+        className
+    ])
+
+    return (
+        <Modal
+            className={classes}
+            {...rest}
+        >
+            {children}
+        </Modal>
+
+    )
+}
+
+export default Sheet

package/components/Slider/Slider.astro

@@ -1,9 +1,10 @@
 ---
 import type { SliderProps } from './slider'
 
-import styles from './slider.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './slider.module.scss'
+
 interface Props extends SliderProps {}
 
 const {