webcoreui 0.6.0 → 0.7.0

package/components/Banner/Banner.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import type { ReactBannerProps } from './banner'
+
+import Button from '../Button/Button.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import closeIcon from '../../icons/close.svg?raw'
+
+import styles from './banner.module.scss'
+
+const Banner = ({
+    top,
+    bottom,
+    closeable,
+    padded,
+    sticky = true,
+    className,
+    children
+}: ReactBannerProps) => {
+    const [visible, setVisible] = useState(true)
+
+    const classes = classNames([
+        styles.banner,
+        bottom && styles.bottom,
+        padded && styles.padded,
+        !sticky && styles.relative,
+        className
+    ])
+
+    const style = top
+        ? { '--w-banner-top': `${top}px` } as React.CSSProperties
+        : undefined
+
+    if (!visible) {
+        return null
+    }
+
+    return (
+        <div className={classes} style={style}>
+            {children}
+            {closeable && (
+                <Button
+                    theme="flat"
+                    className={styles.close}
+                    dangerouslySetInnerHTML={{ __html: closeIcon }}
+                    onClick={() => setVisible(false)}
+                />
+            )}
+        </div>
+    )
+}
+
+export default Banner

package/components/Banner/banner.module.scss

@@ -0,0 +1,57 @@
+@import '../../scss/config.scss';
+
+body {
+    --w-banner-top: 0;
+}
+
+.banner {
+    @include background(primary-60);
+    @include spacing(p-default);
+    @include position(sticky);
+    @include layer(top);
+    @include typography(center);
+
+    top: var(--w-banner-top);
+
+    &.padded {
+        @include border-radius();
+        @include position(l20px);
+
+        width: calc(100% - 40px);
+        top: calc(var(--w-banner-top) + 20px);
+
+        &.bottom {
+            @include position(l20px, b20px);
+        }
+    }
+
+    &.relative {
+        @include position(relative);
+        top: auto;
+    }
+
+    &.bottom {
+        @include position(fixed, b0, l0, r0);
+
+        top: auto;
+    }
+
+    &.closeable {
+        @include spacing(pl-default, pt-default, pb-default, pr-3xl);
+    }
+
+    .close {
+        @include position(absolute, v-center, r10px);
+        @include spacing(p-xs);
+
+        svg {
+            @include size(10px);
+        }
+    }
+}
+
+@include media(xs) {
+    .banner.closeable {
+        @include spacing(p-default);
+    }
+}

package/components/Banner/banner.ts

@@ -0,0 +1,12 @@
+export type BannerProps = {
+    top?: number
+    bottom?: boolean
+    closeable?: boolean
+    padded?: boolean
+    sticky?: boolean
+    className?: string
+}
+
+export type ReactBannerProps = {
+    children: React.ReactNode
+} & BannerProps

package/components/Button/button.ts

@@ -15,7 +15,7 @@ export type ButtonProps = {
         | '_parent'
         | '_top'
         | '_unfencedTop'
-        | null
+        | ''
         | undefined
     href?: string
     className?: string

package/components/Carousel/Carousel.astro

@@ -13,7 +13,7 @@ interface Props extends CarouselProps {}
 
 const {
     items,
-    visibleItems = 1,
+    itemsPerSlide = 1,
     subText,
     scrollSnap = true,
     progress,
@@ -38,6 +38,7 @@ const containerClasses = [
 const wrapperClasses = [
     styles.wrapper,
     effect && styles[effect],
+    itemsPerSlide > 1 && styles['no-snap'],
     wrapperClassName
 ]
 
@@ -51,10 +52,10 @@ const paginationClasses = classNames([
     !subText && paginationClassName
 ])
 
-const totalPages = Math.ceil(items / visibleItems)
+const totalPages = Math.ceil(items / itemsPerSlide)
 const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
-const style = visibleItems > 1
-    ? `--w-slide-width: ${100 / visibleItems}%;`
+const style = itemsPerSlide > 1
+    ? `--w-slide-width: calc(${100 / itemsPerSlide}% - 5px);`
     : null
 ---
 
@@ -67,7 +68,7 @@ const style = visibleItems > 1
         <ul
             class:list={wrapperClasses}
             style={style}
-            data-visible-items={visibleItems > 1 ? visibleItems : null}
+            data-visible-items={itemsPerSlide > 1 ? itemsPerSlide : null}
         >
             <slot />
         </ul>
@@ -159,8 +160,16 @@ const style = visibleItems > 1
 
         const progress = target.closest('section').querySelector('.w-carousel-progress')
         const progressValue = (100 / (Number(target.dataset.totalPages) - 1))
-        const visibleItems = Number(carousel.dataset.visibleItems) || 0
-        const pageIndex = (event.page + visibleItems) - 1
+        const itemsPerSlide = Number(carousel.dataset.visibleItems) || 1
+        const totalItems = carousel.children.length
+        const indexes = Array.from({ length: Math.ceil(totalItems / itemsPerSlide) }, (_, i) => {
+            return Array.from({ length: itemsPerSlide }, (_, j) => (i * itemsPerSlide) + j)
+                .filter(index => index < totalItems)
+        })
+
+        const pageIndex = event.direction === 'prev'
+            ? indexes[event.page - 1][0]
+            : indexes[event.page - 1][indexes[event.page - 1].length - 1]
 
         const liElement = carousel.children[pageIndex]
         const subText = event.target.nextElementSibling

package/components/Carousel/Carousel.svelte

@@ -14,7 +14,7 @@
     import type { PaginationEventType } from '../Pagination/pagination'
 
     export let items: SvelteCarouselProps['items'] = 0
-    export let visibleItems: SvelteCarouselProps['visibleItems'] = 1
+    export let itemsPerSlide: SvelteCarouselProps['itemsPerSlide'] = 1
     export let subText: SvelteCarouselProps['subText'] = ''
     export let scrollSnap: SvelteCarouselProps['scrollSnap'] = true
     export let progress: SvelteCarouselProps['progress'] = false
@@ -46,6 +46,7 @@
     const wrapperClasses = classNames([
         styles.wrapper,
         effect && styles[effect],
+        itemsPerSlide! > 1 && styles['no-snap'],
         wrapperClassName
     ])
 
@@ -59,10 +60,10 @@
         !subText && paginationClassName
     ])
 
-    const totalPages = Math.ceil(items / visibleItems!)
+    const totalPages = Math.ceil(items / itemsPerSlide!)
     const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
-    const style = visibleItems! > 1
-        ? `--w-slide-width: ${100 / visibleItems!}%;`
+    const style = itemsPerSlide! > 1
+        ? `--w-slide-width: calc(${100 / itemsPerSlide!}% - 5px);`
         : null
 
     const updateValues = () => {
@@ -100,7 +101,16 @@
     }, debounce)
 
     const paginate = (event: PaginationEventType) => {
-        const liElement = carouselItems[event.page - 1] as HTMLLIElement
+        const indexes = Array.from({ length: Math.ceil(items / itemsPerSlide!) }, (_, i) => {
+            return Array.from({ length: itemsPerSlide! }, (_, j) => (i * itemsPerSlide!) + j)
+                .filter(index => index < items)
+        })
+
+        const pageIndex = event.direction === 'prev'
+            ? indexes[event.page - 1][0]
+            : indexes[event.page - 1][indexes[event.page - 1].length - 1]
+
+        const liElement = carouselItems[pageIndex] as HTMLLIElement
 
         liElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
 

package/components/Carousel/Carousel.tsx

@@ -14,7 +14,7 @@ import type { PaginationEventType } from '../Pagination/pagination'
 
 const Carousel = ({
     items,
-    visibleItems = 1,
+    itemsPerSlide = 1,
     subText,
     scrollSnap = true,
     progress,
@@ -49,6 +49,7 @@ const Carousel = ({
     const wrapperClasses = classNames([
         styles.wrapper,
         effect && styles[effect],
+        itemsPerSlide! > 1 && styles['no-snap'],
         wrapperClassName
     ])
 
@@ -62,10 +63,10 @@ const Carousel = ({
         !subText && paginationClassName
     ])
 
-    const totalPages = Math.ceil(items / visibleItems!)
+    const totalPages = Math.ceil(items / itemsPerSlide!)
     const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
-    const style = visibleItems > 1
-        ? { '--w-slide-width': `${100 / visibleItems}%;` } as React.CSSProperties
+    const style = itemsPerSlide > 1
+        ? { '--w-slide-width': `calc(${100 / itemsPerSlide!}% - 5px);` } as React.CSSProperties
         : undefined
 
     const updateValues = (page: number) => {
@@ -105,7 +106,16 @@ const Carousel = ({
     }, debounce)
 
     const paginate = (event: PaginationEventType) => {
-        const liElement = carouselItems.current[event.page - 1]
+        const indexes = Array.from({ length: Math.ceil(items / itemsPerSlide!) }, (_, i) => {
+            return Array.from({ length: itemsPerSlide! }, (_, j) => (i * itemsPerSlide!) + j)
+                .filter(index => index < items)
+        })
+
+        const pageIndex = event.direction === 'prev'
+            ? indexes[event.page - 1][0]
+            : indexes[event.page - 1][indexes[event.page - 1].length - 1]
+
+        const liElement = carouselItems.current[pageIndex]
 
         liElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
 

package/components/Carousel/carousel.module.scss

@@ -34,12 +34,15 @@ body {
         filter: saturate(0);
     }
 
+    &:not(.no-snap) li {
+        scroll-snap-align: center;
+    }
+
     li {
         @include transition();
         @include spacing(m0);
         @include layout(flex, h-center);
 
-        scroll-snap-align: center;
         min-width: var(--w-slide-width);
     }
 }

package/components/Carousel/carousel.ts

@@ -2,7 +2,7 @@ import type { PaginationProps } from '../Pagination/pagination'
 
 export type CarouselProps = {
     items: number
-    visibleItems?: number
+    itemsPerSlide?: number
     subText?: string
     autoplay?: boolean
     vertical?: boolean

package/components/DataTable/DataTable.astro

@@ -72,8 +72,8 @@ const columnToggleItems = [{
 }]
 
 const columnFilterItems = headings?.filter(heading => typeof heading !== 'string')
-    .filter(heading => heading.filterable)
-    .map(heading => heading.name)
+    .filter(heading => (heading as HeadingObject).filterable)
+    .map(heading => (heading as HeadingObject).name)
     .map(heading => getColumnName(heading))
 
 const hasPagination = data?.length && itemsPerPage