webcoreui 1.2.0 → 1.4.0

package/components/Image/Image.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import type { ImageProps } from './image'
+
+import AspectRatio from '../AspectRatio/AspectRatio.tsx'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './image.module.scss'
+
+const Image = ({
+    src,
+    alt,
+    width,
+    height,
+    lazy,
+    ratio,
+    center,
+    full,
+    rounded,
+    className,
+    ...rest
+}: ImageProps) => {
+    const classes = classNames([
+        styles.img,
+        center && styles.center,
+        full && styles[full],
+        rounded && styles[rounded],
+        className
+    ])
+
+    return (
+        <ConditionalWrapper
+            condition={!!ratio}
+            wrapper={children => (
+                <AspectRatio ratio={ratio || ''}>{children}</AspectRatio>
+            )}
+        >
+            <img
+                {...rest}
+                src={src}
+                alt={alt || ''}
+                width={width}
+                height={height}
+                loading={lazy ? 'lazy' : undefined}
+                className={classes}
+            />
+        </ConditionalWrapper>
+    )
+}
+
+export default Image

package/components/Image/image.module.scss

@@ -0,0 +1,47 @@
+@use '../../scss/config.scss' as *;
+
+.img {
+    &.center {
+        @include spacing(auto-none);
+    }
+
+    &.width {
+        @include size('w100%');
+    }
+
+    &.height {
+        @include size('h100%');
+    }
+
+    &.both {
+        @include size(100%);
+    }
+
+    &.top {
+        @include border-radius(top);
+    }
+
+    &.bottom {
+        @include border-radius(bottom);
+    }
+
+    &.left {
+        @include border-radius(left);
+    }
+
+    &.right {
+        @include border-radius(right);
+    }
+
+    &.diagonal {
+        @include border-radius(diagonal);
+    }
+
+    &.reverse-diagonal {
+        @include border-radius(reverse-diagonal);
+    }
+
+    &.none {
+        @include border-radius(none);
+    }
+}

package/components/Image/image.ts

@@ -0,0 +1,13 @@
+export type ImageProps = {
+    src: string
+    alt: string
+    width: number | string
+    height: number | string
+    lazy?: boolean
+    ratio?: string
+    center?: boolean
+    full?: 'width' | 'height' | 'both'
+    rounded?: 'top' | 'bottom' | 'left' | 'right' | 'diagonal' | 'reverse-diagonal' | 'none'
+    className?: string
+    [key: string]: any
+}

package/components/ImageLoader/ImageLoader.astro

@@ -0,0 +1,82 @@
+---
+import type { ImageLoaderProps } from './imageloader'
+
+import Image from '../Image/Image.astro'
+import Skeleton from '../Skeleton/Skeleton.astro'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './imageloader.module.scss'
+
+interface Props extends ImageLoaderProps {}
+
+const {
+    fallback,
+    animate,
+    type,
+    width,
+    height,
+    color,
+    waveColor,
+    className,
+    ...rest
+} = Astro.props
+
+const styleVariables = classNames([
+    `width: ${width}px;`,
+    `height: ${height}px;`
+])
+---
+
+<div data-id="w-image-loader" class={styles.loader} style={styleVariables}>
+    <Skeleton
+        animate={animate}
+        type={type}
+        width={Number(width)}
+        height={Number(height)}
+        color={color}
+        waveColor={waveColor}
+        className={className}
+    />
+    <Image
+        width={width}
+        height={height}
+        className={className}
+        data-fallback={fallback}
+        {...rest}
+    />
+</div>
+
+<script>
+    import { get, on } from '../../utils/DOMUtils'
+
+    const addEventListeners = () => {
+        const images = get<HTMLImageElement>('[data-id="w-image-loader"] img', true)
+
+        if (!images || !(images instanceof NodeList)) {
+            return
+        }
+
+        images.forEach(img => {
+            const container = img.parentElement as HTMLDivElement
+            const skeleton = container.firstElementChild as HTMLDivElement
+
+            const handleError = () => {
+                img.src = img.dataset.fallback || img.src
+                skeleton?.remove()
+            }
+
+            if (img.complete) {
+                img.naturalWidth === 0 ? handleError() : skeleton?.remove()
+
+                return
+            }
+
+            img.addEventListener('load', () => skeleton?.remove(), { once: true })
+            img.addEventListener('error', () => handleError(), { once: true })
+        })
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
+</script>

package/components/ImageLoader/ImageLoader.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import type { ImageLoaderProps } from './imageloader'
+
+    import Image from '../Image/Image.svelte'
+    import Skeleton from '../Skeleton/Skeleton.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './imageloader.module.scss'
+
+    const {
+        fallback,
+        animate,
+        type,
+        width,
+        height,
+        color,
+        waveColor,
+        className,
+        ...rest
+    }: ImageLoaderProps = $props()
+
+    let container: HTMLDivElement
+
+    const styleVariables = classNames([
+        `width: ${width}px;`,
+        `height: ${height}px;`
+    ])
+
+    onMount(() => {
+        const img = container.querySelector<HTMLImageElement>('img')
+        const skeleton = container.querySelector<HTMLDivElement>('div')
+
+        if (!img) {
+            return
+        }
+
+        const handleError = () => {
+            img.src = img.dataset.fallback || img.src
+            skeleton?.remove()
+        }
+
+        if (img.complete) {
+            img.naturalWidth === 0 ? handleError() : skeleton?.remove()
+
+            return
+        }
+
+        img.addEventListener('load', () => skeleton?.remove(), { once: true })
+        img.addEventListener('error', handleError, { once: true })
+    })
+</script>
+
+<div class={styles.loader} style={styleVariables} bind:this={container}>
+    <Skeleton
+        animate={animate}
+        type={type}
+        width={Number(width)}
+        height={Number(height)}
+        color={color}
+        waveColor={waveColor}
+        className={className}
+    />
+    <Image
+        width={width}
+        height={height}
+        className={className}
+        data-fallback={fallback}
+        {...rest}
+    />
+</div>

package/components/ImageLoader/ImageLoader.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef } from 'react'
+import type { ImageLoaderProps } from './imageloader'
+
+import Image from '../Image/Image.tsx'
+import Skeleton from '../Skeleton/Skeleton.tsx'
+
+import styles from './imageloader.module.scss'
+
+const ImageLoader = ({
+    fallback,
+    animate,
+    type,
+    width,
+    height,
+    color,
+    waveColor,
+    className,
+    ...rest
+}: ImageLoaderProps) => {
+    const containerRef = useRef<HTMLDivElement>(null)
+    const styleVariables = {
+        width,
+        height
+    }
+
+    useEffect(() => {
+        if (!containerRef.current) {
+            return
+        }
+
+        const img = containerRef.current.querySelector<HTMLImageElement>('img')
+        const skeleton = containerRef.current.querySelector<HTMLDivElement>('div')
+
+        if (!img) {
+            return
+        }
+
+        const removeSkeleton = () => skeleton?.remove()
+
+        const handleError = () => {
+            img.src = img.dataset.fallback || img.src
+            removeSkeleton()
+        }
+
+        if (img.complete) {
+            img.naturalWidth === 0 ? handleError() : removeSkeleton()
+
+            return
+        }
+
+        img.addEventListener('load', removeSkeleton, { once: true })
+        img.addEventListener('error', handleError, { once: true })
+
+        return () => {
+            img.removeEventListener('load', removeSkeleton)
+            img.removeEventListener('error', handleError)
+        }
+    }, [containerRef])
+
+    return (
+        <div className={styles.loader} style={styleVariables} ref={containerRef}>
+            <Skeleton
+                animate={animate}
+                type={type}
+                width={Number(width)}
+                height={Number(height)}
+                color={color}
+                waveColor={waveColor}
+                className={className}
+            />
+            <Image
+                width={width}
+                height={height}
+                className={className}
+                data-fallback={fallback}
+                {...rest}
+            />
+        </div>
+    )
+}
+
+export default ImageLoader

package/components/ImageLoader/imageloader.module.scss

@@ -0,0 +1,13 @@
+@use '../../scss/config.scss' as *;
+
+.loader {
+    @include position(relative);
+
+    div + img {
+        @include visibility(0);
+    }
+
+    img {
+        @include position(absolute, t0, l0);
+    }
+}

package/components/ImageLoader/imageloader.ts

@@ -0,0 +1,6 @@
+import type { ImageProps } from '../Image/image'
+import type { SkeletonProps } from '../Skeleton/skeleton'
+
+export type ImageLoaderProps = {
+    fallback?: string
+} & ImageProps & Omit<SkeletonProps, 'width' | 'height'>

package/components/Input/input.ts

@@ -48,7 +48,7 @@ export type InputProps = {
 export type SvelteInputProps = {
     onChange?: (event: Event & InputTarget) => void
     onKeyUp?: (event: KeyboardEvent & InputTarget) => void
-    onInput?: (event: any) => void
+    onInput?: (event: Event & InputTarget) => void
     onClick?: (event: MouseEvent & InputTarget) => void
     children?: Snippet
 } & InputProps
@@ -56,7 +56,7 @@ export type SvelteInputProps = {
 export type ReactInputProps = {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
     onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void
-    onInput?: (event: React.FormEvent<HTMLInputElement>) => void
+    onInput?: (event: React.InputEvent<HTMLInputElement>) => void
     onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
     children?: React.ReactNode
 } & InputProps

package/components/List/List.astro

@@ -19,17 +19,20 @@ const {
     id,
     className,
     wrapperClassName,
+    secondary,
     itemGroups
 } = Astro.props
 
 const classes = [
     styles.list,
+    (secondary && !showSearchBar) && styles.secondary,
     !showSearchBar && styles.container,
     className
 ]
 
 const wrapperClasses = [
     styles.container,
+    secondary && styles.secondary,
     wrapperClassName
 ]
 ---

package/components/List/List.svelte

@@ -19,6 +19,7 @@
         id,
         className,
         wrapperClassName,
+        secondary,
         itemGroups = $bindable([]),
         onSelect
     }: SvelteListProps = $props()
@@ -28,12 +29,14 @@
 
     const classes = classNames([
         styles.list,
+        (secondary && !showSearchBar) && styles.secondary,
         !showSearchBar && styles.container,
         className
     ])
 
     const wrapperClasses = classNames([
         styles.container,
+        secondary && styles.secondary,
         wrapperClassName
     ])
 
@@ -81,15 +84,15 @@
     class={wrapperClasses}
 >
     {#if showSearchBar}
-        <Input
-            type="search"
-            placeholder={searchBarPlaceholder}
-            onInput={search}
-        >
-            {#if showSearchBarIcon}
-                {@html searchIcon}
-            {/if}
-        </Input>
+        {#if showSearchBarIcon}
+            <Input type="search" placeholder={searchBarPlaceholder} onInput={search}>
+                {#if showSearchBarIcon}
+                    {@html searchIcon}
+                {/if}
+            </Input>
+        {:else}
+            <Input type="search" placeholder={searchBarPlaceholder} onInput={search} />
+        {/if}
     {/if}
     <ul
         class={classes}

package/components/List/List.tsx

@@ -19,6 +19,7 @@ const List = ({
     id,
     className,
     wrapperClassName,
+    secondary,
     itemGroups,
     onSelect
 }: ReactListProps) => {
@@ -28,12 +29,14 @@ const List = ({
 
     const classes = classNames([
         styles.list,
+        (secondary && !showSearchBar) && styles.secondary,
         !showSearchBar && styles.container,
         className
     ])
 
     const wrapperClasses = classNames([
         styles.container,
+        secondary && styles.secondary,
         wrapperClassName
     ])
 

package/components/List/list.module.scss

@@ -85,6 +85,11 @@
 .container {
     @include border-radius(md);
     @include border(primary-50);
+    @include background(primary-70);
+
+    &.secondary {
+        @include background(primary-60);
+    }
 
     input {
         @include border(top, 0);

package/components/List/list.ts

@@ -1,39 +1,40 @@
-import type { ButtonProps } from '../Button/button'
-
-export type ListEventType = {
-    value: string
-    name: string
-    list: HTMLUListElement
-}
-
-export type ListProps = {
-    showSearchBar?: boolean
-    showSearchBarIcon?: boolean
-    searchBarPlaceholder?: string
-    noResultsLabel?: string
-    maxHeight?: string
-    id?: string
-    className?: string
-    wrapperClassName?: string
-    itemGroups: {
-        title?: string
-        items: {
-            name: string
-            value?: string
-            href?: string
-            target?: ButtonProps['target']
-            selected?: boolean
-            disabled?: boolean
-            icon?: string
-            subText?: string
-        }[]
-    }[]
-}
-
-export type SvelteListProps = {
-    onSelect?: (event: ListEventType) => void
-} & ListProps
-
-export type ReactListProps = {
-    onSelect?: (event: ListEventType) => void
-} & ListProps
+import type { ButtonProps } from '../Button/button'
+
+export type ListEventType = {
+    value: string
+    name: string
+    list: HTMLUListElement
+}
+
+export type ListProps = {
+    showSearchBar?: boolean
+    showSearchBarIcon?: boolean
+    searchBarPlaceholder?: string
+    noResultsLabel?: string
+    maxHeight?: string
+    id?: string
+    className?: string
+    wrapperClassName?: string
+    secondary?: boolean
+    itemGroups: {
+        title?: string
+        items: {
+            name: string
+            value?: string
+            href?: string
+            target?: ButtonProps['target']
+            selected?: boolean
+            disabled?: boolean
+            icon?: string
+            subText?: string
+        }[]
+    }[]
+}
+
+export type SvelteListProps = {
+    onSelect?: (event: ListEventType) => void
+} & ListProps
+
+export type ReactListProps = {
+    onSelect?: (event: ListEventType) => void
+} & ListProps

package/components/Menu/Menu.tsx

@@ -7,7 +7,6 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './menu.module.scss'
 
-// eslint-disable-next-line complexity
 const Menu = ({
     items,
     logo,
@@ -15,6 +14,7 @@ const Menu = ({
     className,
     wrapperClassName,
     children
+// eslint-disable-next-line complexity
 }: ReactMenuProps) => {
     const [active, setActive] = useState(false)
 

package/components/Pagination/Pagination.tsx

@@ -10,7 +10,6 @@ import ChevronRight from '../../icons/chevron-right.svg?raw'
 
 import styles from './pagination.module.scss'
 
-// eslint-disable-next-line complexity
 const Pagination = ({
     type,
     showChevrons,
@@ -27,6 +26,7 @@ const Pagination = ({
     currentPage,
     onChange,
     className
+// eslint-disable-next-line complexity
 }: ReactPaginationProps) => {
     const [calculatedCurrentPage, setCalculatedCurrentPage] = useState(
         currentPage

package/components/Pagination/pagination.module.scss

@@ -5,6 +5,7 @@
     @include spacing(0);
 
     list-style-type: none;
+    user-select: none;
 
     &.primary [data-active="true"] {
         @include typography(primary-70);

package/components/Popover/Popover.astro

@@ -1,26 +1,28 @@
----
-import type { PopoverProps } from './popover'
-
-import styles from './popover.module.scss'
-
-interface Props extends PopoverProps {}
-
-const {
-    id,
-    className,
-    ...rest
-} = Astro.props
-
-const classes = [
-    styles.popover,
-    className
-]
----
-
-<dialog
-    class:list={classes}
-    id={id}
-    {...rest}
->
-    <slot />
-</dialog>
+---
+import type { PopoverProps } from './popover'
+
+import styles from './popover.module.scss'
+
+interface Props extends PopoverProps {}
+
+const {
+    id,
+    className,
+    transparent,
+    ...rest
+} = Astro.props
+
+const classes = [
+    styles.popover,
+    transparent && styles.transparent,
+    className
+]
+---
+
+<dialog
+    class:list={classes}
+    id={id}
+    {...rest}
+>
+    <slot />
+</dialog>

package/components/Popover/Popover.svelte

@@ -8,12 +8,14 @@
     const {
         id,
         className,
+        transparent,
         children,
         ...rest
     }: SveltePopoverProps = $props()
 
     const classes = classNames([
         styles.popover,
+        transparent && styles.transparent,
         className
     ])
 </script>