webcoreui 0.5.0 → 0.6.1

package/components/Modal/Modal.tsx

@@ -26,6 +26,7 @@ const Modal = ({
     showCloseIcon = true,
     closeOnEsc = true,
     closeOnOverlay = true,
+    transparent,
     theme,
     id,
     className,
@@ -35,6 +36,7 @@ const Modal = ({
     const classes = classNames([
         styles.modal,
         theme && styles[theme],
+        transparent && styles.transparent,
         className
     ])
 

package/components/Modal/modal.module.scss

@@ -28,28 +28,11 @@
         }
     }
 
-    .close {
-        @include position(absolute, t10px, r10px);
-        @include spacing(p-xs);
-
-        svg {
-            @include size(10px);
-        }
-    }
-
-    .title {
-        @include typography(lg);
-        @include spacing(mb-xs);
-        @include layout(flex, v-center, xs);
-
-        svg {
-            @include size(20px);
-        }
-    }
-
-    .subTitle {
-        @include typography(primary-20);
-        @include spacing(mb-xs);
+    &.transparent {
+        @include border(0);
+        @include spacing(p0);
+        @include size('wfit-content');
+        @include background(transparent);
     }
 
     &.info {
@@ -83,6 +66,30 @@
             @include typography(alert);
         }
     }
+
+    .close {
+        @include position(absolute, t10px, r10px);
+        @include spacing(p-xs);
+
+        svg {
+            @include size(10px);
+        }
+    }
+
+    .title {
+        @include typography(lg);
+        @include spacing(mb-xs);
+        @include layout(flex, v-center, xs);
+
+        svg {
+            @include size(20px);
+        }
+    }
+
+    .subTitle {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
 }
 
 .overlay {

package/components/Modal/modal.ts

@@ -4,6 +4,7 @@ export type ModalProps = {
     showCloseIcon?: boolean
     closeOnEsc?: boolean
     closeOnOverlay?: boolean
+    transparent?: boolean
     id?: string
     className?: string
     theme?: 'info'

package/components/Pagination/Pagination.astro

@@ -150,6 +150,7 @@ const generatedPages = pages?.length
                 const prevPageButton = element.querySelector('[data-page="prev"]') as HTMLButtonElement
                 const nextPageButton = element.querySelector('[data-page="next"]') as HTMLButtonElement
                 const currentPageButton = element.querySelector('[data-active]') as HTMLButtonElement
+                const previousPage = currentPage
 
                 const pageElements = Array
                     .from(pagination.children)
@@ -179,6 +180,7 @@ const generatedPages = pages?.length
 
                 dispatch('paginate', {
                     page: currentPage,
+                    direction: previousPage > currentPage ? 'prev' : 'next',
                     ...(activeButton?.dataset.page && { label: activeButton?.dataset.page }),
                     target: element,
                     trusted: event.isTrusted

package/components/Pagination/Pagination.svelte

@@ -45,6 +45,8 @@
         }))
 
     const paginate = (to: string | number) => {
+        const previousPage = calculatedCurrentPage
+
         if (to === 'prev') {
             calculatedCurrentPage = calculatedCurrentPage - 1
         } else if (to === 'next') {
@@ -57,6 +59,7 @@
 
         onChange?.({
             page: calculatedCurrentPage,
+            direction: previousPage > calculatedCurrentPage ? 'prev' : 'next',
             ...(label && { label })
         })
     }
@@ -87,7 +90,7 @@
                 theme={theme}
                 onClick={!(disablePrevious || (calculatedCurrentPage === 1 && !previousLink))
                     ? () => paginate('prev')
-                    : null
+                    : undefined
                 }
             >
                 {#if showChevrons || type === 'arrows'}
@@ -107,7 +110,7 @@
                         theme={theme}
                         onClick={calculatedCurrentPage !== index + 1
                             ? () => paginate(index + 1)
-                            : null
+                            : undefined
                         }
                     >
                         {page.label}
@@ -129,7 +132,7 @@
                 theme={theme}
                 onClick={!disableNext
                     ? () => paginate('next')
-                    : null
+                    : undefined
                 }
             >
                 {#if type !== 'arrows'}

package/components/Pagination/Pagination.tsx

@@ -53,6 +53,7 @@ const Pagination = ({
         }))
 
     const paginate = (to: string | number) => {
+        const previousPage = calculatedCurrentPage
         let currentPage = calculatedCurrentPage
 
         if (to === 'prev') {
@@ -69,6 +70,7 @@ const Pagination = ({
 
         onChange?.({
             page: currentPage,
+            direction: previousPage > currentPage ? 'prev' : 'next',
             ...(label && { label })
         })
     }
@@ -104,7 +106,7 @@ const Pagination = ({
                             theme={theme}
                             onClick={!(disablePrevious || (calculatedCurrentPage === 1 && !previousLink))
                                 ? () => paginate('prev')
-                                : null
+                                : undefined
                             }
                         >
                             {(showChevrons || type === 'arrows') && (
@@ -122,7 +124,7 @@ const Pagination = ({
                                     theme={theme}
                                     onClick={calculatedCurrentPage !== index + 1
                                         ? () => paginate(index + 1)
-                                        : null
+                                        : undefined
                                     }
                                 >
                                     {page.label}
@@ -144,7 +146,7 @@ const Pagination = ({
                             theme={theme}
                             onClick={!disableNext
                                 ? () => paginate('next')
-                                : null
+                                : undefined
                             }
                         >
                             {type !== 'arrows' && nextPageLabel}

package/components/Pagination/pagination.ts

@@ -2,6 +2,7 @@ import type { ButtonProps } from '../Button/button'
 
 export type PaginationEventType = {
     page: number
+    direction: 'prev' | 'next'
     label?: string | number | undefined
 }
 

package/components/Rating/rating.ts

@@ -1,3 +1,5 @@
+import type { ButtonProps } from '../Button/button'
+
 export type RatingProps = {
     score: number
     total?: number
@@ -8,7 +10,7 @@ export type RatingProps = {
     reviewCount?: number
     reviewText?: string
     reviewLink?: string
-    reviewTarget?: string
+    reviewTarget?: ButtonProps['target']
     color?: string
     emptyColor?: string
     size?: number

package/components/Sidebar/Sidebar.astro

@@ -0,0 +1,61 @@
+---
+import type { SidebarProps } from './sidebar'
+
+import Badge from '../Badge/Badge.astro'
+import Icon from '../Icon/Icon.astro'
+
+import styles from './sidebar.module.scss'
+
+import type { IconProps } from '../Icon/icon'
+
+interface Props extends SidebarProps {}
+
+const {
+    groups,
+    className
+} = Astro.props
+
+const classes = [
+    styles.sidebar,
+    className
+]
+---
+
+<aside class:list={classes}>
+    {groups.map(group => (
+        <Fragment>
+            {group.title && (
+                <strong>{group.title}</strong>
+            )}
+
+            <ul>
+                {group.items.map(item => (
+                    <li>
+                        <a
+                            href={item.href}
+                            target={item.target}
+                            class:list={[item.active && styles.active]}
+                        >
+                            {item.icon && (
+                                <Fragment>
+                                    {item.icon.startsWith('<svg')
+                                        ? <Fragment set:html={item.icon} />
+                                        : <Icon type={item.icon as IconProps['type']} />
+                                    }
+                                </Fragment>
+                            )}
+                            {item.name}
+                            {item.badge && (
+                                <Badge theme={item.badgeTheme || 'success'} small={true}>
+                                    {item.badge}
+                                </Badge>
+                            )}
+                        </a>
+                    </li>
+                ))}
+            </ul>
+        </Fragment>
+    ))}
+
+    <slot />
+</aside>

package/components/Sidebar/Sidebar.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import type { SidebarProps } from './sidebar'
+
+    import Badge from '../Badge/Badge.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './sidebar.module.scss'
+
+    export let groups: SidebarProps['groups'] = []
+    export let className: SidebarProps['className'] = ''
+
+    const classes = classNames([
+        styles.sidebar,
+        className
+    ])
+</script>
+
+<aside class={classes}>
+    {#each groups as group}
+
+        {#if group.title}
+            <strong>{group.title}</strong>
+        {/if}
+
+        <ul>
+            {#each group.items as item}
+                <li>
+                    <a
+                        href={item.href}
+                        target={item.target}
+                        class={item.active ? styles.active : undefined}
+                    >
+                        {#if item.icon}
+                            {@html item.icon}
+                        {/if}
+                        {item.name}
+                        {#if item.badge}
+                            <Badge theme={item.badgeTheme || 'success'} small={true}>
+                                {item.badge}
+                            </Badge>
+                        {/if}
+                    </a>
+                </li>
+            {/each}
+        </ul>
+    {/each}
+
+    <slot />
+</aside>

package/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import type { ReactSidebarProps } from './sidebar'
+
+import Badge from '../Badge/Badge.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './sidebar.module.scss'
+
+const Sidebar = ({
+    groups,
+    children,
+    className
+}: ReactSidebarProps) => {
+    const classes = classNames([
+        styles.sidebar,
+        className
+    ])
+
+    return (
+        <aside className={classes}>
+            {groups.map((group, groupIndex) => (
+                <React.Fragment key={groupIndex}>
+                    {group.title && (
+                        <strong>{group.title}</strong>
+                    )}
+
+                    <ul>
+                        {group.items.map((item, itemIndex) => (
+                            <li key={itemIndex}>
+                                <a
+                                    href={item.href}
+                                    target={item.target}
+                                    className={item.active ? styles.active : undefined}
+                                >
+                                    {item.icon && (
+                                        <span dangerouslySetInnerHTML={{ __html: item.icon }} />
+                                    )}
+                                    {item.name}
+                                    {item.badge && (
+                                        <Badge theme={item.badgeTheme || 'success'} small={true}>
+                                            {item.badge}
+                                        </Badge>
+                                    )}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </React.Fragment>
+            ))}
+
+            {children}
+        </aside>
+    )
+}
+
+export default Sidebar
+

package/components/Sidebar/sidebar.module.scss

@@ -0,0 +1,43 @@
+@import '../../scss/config.scss';
+
+.sidebar {
+
+    strong {
+        @include spacing(mb-sm);
+
+        display: block;
+    }
+
+    ul {
+        @include layout(flex, column, sm);
+        @include typography(normal);
+        @include spacing(0);
+
+        list-style-type: none;
+        
+        &:not(:last-child) {
+            @include spacing('mb-3xl');
+        }
+
+        li {
+            @include spacing(m0);
+        }
+
+        a {
+            @include typography(primary-20, none);
+            @include layout(flex, v-center, sm);
+
+            &:hover {
+                @include typography(primary);
+            }
+
+            &.active {
+                @include typography(primary);
+            }
+
+            svg {
+                @include size(18px);
+            }
+        }
+    }
+}

package/components/Sidebar/sidebar.ts

@@ -0,0 +1,21 @@
+import type { ButtonProps } from '../Button/button'
+
+export type SidebarProps = {
+    groups: {
+        title?: string
+        items: {
+            name: string
+            href: string
+            target?: ButtonProps['target']
+            active?: boolean
+            icon?: string
+            badge?: string
+            badgeTheme?: ButtonProps['theme']
+        }[]
+    }[]
+    className?: string
+}
+
+export type ReactSidebarProps = {
+    children?: React.ReactNode
+} & SidebarProps

package/components/Switch/switch.ts

@@ -1,3 +1,5 @@
+import type { MouseEventHandler } from 'svelte/elements'
+
 export type SwitchProps = {
     label?: string
     reverse?: boolean
@@ -11,9 +13,9 @@ export type SwitchProps = {
 }
 
 export type SvelteSwitchProps = {
-    onClick?: (key: any) => any
+    onClick?: MouseEventHandler<HTMLInputElement>
 } & SwitchProps
 
 export type ReactSwitchProps = {
-    onClick?: (key: any) => any
+    onClick?: React.MouseEventHandler<HTMLInputElement>
 } & SwitchProps

package/icons/circle-close.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6667 8.33333L8.33333 15.6667M8.33333 8.33333L15.6667 15.6667M23 12C23 13.4445 22.7155 14.8749 22.1627 16.2095C21.6099 17.5441 20.7996 18.7567 19.7782 19.7782C18.7567 20.7996 17.5441 21.6099 16.2095 22.1627C14.8749 22.7155 13.4445 23 12 23C10.5555 23 9.12506 22.7155 7.79048 22.1627C6.4559 21.6099 5.24327 20.7996 4.22183 19.7782C3.20038 18.7567 2.39013 17.5441 1.83733 16.2095C1.28452 14.8749 1 13.4445 1 12C1 9.08262 2.15893 6.28473 4.22183 4.22183C6.28473 2.15893 9.08262 1 12 1C14.9174 1 17.7153 2.15893 19.7782 4.22183C21.8411 6.28473 23 9.08262 23 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/components.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.15 4.85L12 1L15.85 4.85L12 8.7L8.15 4.85ZM15.3 12.55L19.15 8.7L23 12.55L19.15 16.4L15.3 12.55ZM8.15 19.15L12 15.3L15.85 19.15L12 23L8.15 19.15ZM1 12L4.85 8.15L8.7 12L4.85 15.85L1 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/file.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.30726 1H6.66667C5.95942 1 5.28115 1.28973 4.78105 1.80546C4.28095 2.32118 4 3.02065 4 3.75V20.25C4 20.9793 4.28095 21.6788 4.78105 22.1945C5.28115 22.7103 5.95942 23 6.66667 23H17.3333C18.0406 23 18.7189 22.7103 19.219 22.1945C19.719 21.6788 20 20.9793 20 20.25V12M9.30726 1C10.7804 1 12 2.23078 12 3.75V6.5C12 7.22935 12.281 7.92882 12.781 8.44454C13.2811 8.96027 13.9594 9.25 14.6667 9.25H17.3333C18.0406 9.25 18.7189 9.53973 19.219 10.0555C19.719 10.5712 20 11.2707 20 12M9.30726 1C13.6806 1 20 7.55111 20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/home.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.66625 23C3.19375 23 2 21.8022 2 20.3234V9.56554C2 8.75277 2.36875 7.98279 3 7.47557L10.3337 1.587C10.8023 1.2076 11.3916 1 12 1C12.6084 1 13.1977 1.2076 13.6663 1.587L20.9987 7.47557C21.6312 7.98279 22 8.75277 22 9.56554V20.3234C22 21.8022 20.8063 23 19.3338 23H4.66625Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 23V16.4C9 15.7635 9.25286 15.153 9.70294 14.7029C10.153 14.2529 10.7635 14 11.4 14H12.6C13.2365 14 13.847 14.2529 14.2971 14.7029C14.7471 15.153 15 15.7635 15 16.4V23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/sun.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1 12H4.66667M3.44444 3.44444L6.03678 6.03678M20.5556 3.44444L17.9632 6.03678M3.44444 20.5556L6.03678 17.9632M20.5556 20.5556L17.9632 17.9632M12 1V4.66667M12 23V19.3333M19.3333 12H23M15.6667 12C15.6667 12.9725 15.2804 13.9051 14.5927 14.5927C13.9051 15.2804 12.9725 15.6667 12 15.6667C11.0275 15.6667 10.0949 15.2804 9.40727 14.5927C8.71964 13.9051 8.33333 12.9725 8.33333 12C8.33333 11.0275 8.71964 10.0949 9.40727 9.40727C10.0949 8.71964 11.0275 8.33333 12 8.33333C12.9725 8.33333 13.9051 8.71964 14.5927 9.40727C15.2804 10.0949 15.6667 11.0275 15.6667 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/icons.d.ts

@@ -5,8 +5,12 @@ declare module 'webcoreui/icons' {
 	export const arrowRight: string
 	export const check: string
 	export const circleCheck: string
+	export const circleClose: string
 	export const close: string
+	export const components: string
+	export const file: string
 	export const github: string
+	export const home: string
 	export const info: string
 	export const moon: string
 	export const order: string

package/icons.js

@@ -4,8 +4,12 @@ export { default as arrowLeft } from './icons/arrow-left.svg?raw'
 export { default as arrowRight } from './icons/arrow-right.svg?raw'
 export { default as check } from './icons/check.svg?raw'
 export { default as circleCheck } from './icons/circle-check.svg?raw'
+export { default as circleClose } from './icons/circle-close.svg?raw'
 export { default as close } from './icons/close.svg?raw'
+export { default as components } from './icons/components.svg?raw'
+export { default as file } from './icons/file.svg?raw'
 export { default as github } from './icons/github.svg?raw'
+export { default as home } from './icons/home.svg?raw'
 export { default as info } from './icons/info.svg?raw'
 export { default as moon } from './icons/moon.svg?raw'
 export { default as order } from './icons/order.svg?raw'

package/index.d.ts

@@ -68,6 +68,14 @@ declare module 'webcoreui' {
         cancel: () => void
     }
 
+    export const get: (selector: string, all: boolean) => Element | NodeListOf<Element> | null
+    export const on: (
+        selector: string | HTMLElement,
+        event: string,
+        callback: any,
+        all?: boolean
+    ) => void
+
     export const dispatch: (event: string, detail: unknown) => void
     export const listen: (event: string, callback: (e: any) => unknown) => {
         remove: () => void

package/index.js

@@ -1,6 +1,7 @@
 export * from './utils/classNames.ts'
 export * from './utils/cookies.ts'
 export * from './utils/debounce.ts'
+export * from './utils/DOMUtils.ts'
 export * from './utils/event.ts'
 export * from './utils/interpolate.ts'
 export * from './utils/modal.ts'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.5.0",
+    "version": "0.6.1",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
@@ -12,20 +12,14 @@
         "create-component": "node scripts/createComponent.js",
         "lint": "eslint src/**/* --fix"
     },
-    "dependencies": {
+    "devDependencies": {
         "@astrojs/check": "0.7.0",
+        "@astrojs/node": "8.3.4",
         "@astrojs/react": "3.5.0",
         "@astrojs/svelte": "5.5.0",
-        "astro": "4.10.2",
-        "react": "18.3.1",
-        "react-dom": "18.3.1",
-        "sass": "1.77.5",
-        "svelte": "4.2.18",
-        "typescript": "5.4.5"
-    },
-    "devDependencies": {
         "@eslint/js": "9.9.1",
         "@typescript-eslint/parser": "8.3.0",
+        "astro": "4.15.11",
         "astro-eslint-parser": "1.0.2",
         "eslint": "9.9.1",
         "eslint-plugin-astro": "1.2.3",
@@ -34,7 +28,12 @@
         "eslint-plugin-svelte": "2.43.0",
         "husky": "9.1.5",
         "lint-staged": "15.2.9",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "sass": "1.77.5",
+        "svelte": "4.2.19",
         "svelte-eslint-parser": "0.41.0",
+        "typescript": "5.4.5",
         "typescript-eslint": "8.3.0"
     },
     "exports": {