webcoreui 0.5.0 → 0.6.1

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/Checkbox/checkbox.ts

@@ -1,3 +1,5 @@
+import type { MouseEventHandler } from 'svelte/elements'
+
 export type CheckboxProps = {
     checked?: boolean
     label?: string
@@ -8,9 +10,9 @@ export type CheckboxProps = {
 }
 
 export type SvelteCheckboxProps = {
-    onClick?: (key: any) => any
+    onClick?: MouseEventHandler<HTMLInputElement>
 } & CheckboxProps
 
 export type ReactCheckboxProps = {
-    onClick?: (key: any) => any
+    onClick?: React.MouseEventHandler<HTMLInputElement>
 } & CheckboxProps

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