webcoreui 0.4.1 → 0.6.0

package/components/Select/Select.astro

@@ -21,8 +21,9 @@ const {
     label,
     subText,
     disabled,
-    className,
     position,
+    updateValue = true,
+    className,
     ...rest
 } = Astro.props
 
@@ -42,6 +43,7 @@ const classes = classNames([
     label={label}
     subText={subText}
     data-id={`w-select-${name}`}
+    data-no-update={!updateValue ? 'true' : undefined}
     data-position={position}
     labelClassName={classes}
 >
@@ -125,11 +127,13 @@ const classes = classNames([
 
         closePopover(`[data-id="${popoverId}"]`)
 
-        selectElement.value = name
+        if (!selectElement.dataset.noUpdate) {
+            selectElement.value = name
+        }
 
         dispatch('selectOnChange', {
-            select: selectName,
-            ...payload
+            ...payload,
+            select: selectName
         })
     })
 </script>

package/components/Select/Select.svelte

@@ -16,14 +16,17 @@
 
     import styles from './select.module.scss'
 
+    import type { ListEventType } from '../List/list'
+
     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 updateValue: SvelteSelectProps['updateValue'] = true
     export let position: SvelteSelectProps['position'] = 'bottom'
+    export let className: SvelteSelectProps['className'] = ''
     export let onChange: SvelteSelectProps['onChange'] = () => {}
 
     let popoverInstance: any
@@ -39,18 +42,22 @@
         styles.popover
     ])
 
-    const select = (payload: any) => {
+    const select = (event: ListEventType) => {
         closePopover(`.w-options-${name}`)
 
-        value = payload.name
+        if (updateValue) {
+            value = event.name
+        }
 
         onChange?.({
-            select: name,
-            ...payload
+            ...event,
+            select: name
         })
     }
 
     onMount(() => {
+        let observer: ResizeObserver | undefined
+
         if (position === 'modal') {
             modal({
                 trigger: `.w-select-${name}`,
@@ -73,7 +80,8 @@
                 dialogElement.style.width = `${width}px`
             })
 
-            new ResizeObserver(() => resize()).observe(document.body)
+            observer = new ResizeObserver(() => resize())
+            observer.observe(document.body)
 
             popoverInstance = popover({
                 trigger: `.w-select-${name}`,
@@ -91,6 +99,7 @@
 
         return () => {
             popoverInstance?.remove()
+            observer?.unobserve(document.body)
         }
     })
 </script>

package/components/Select/Select.tsx

@@ -15,6 +15,8 @@ import ArrowDown from '../../icons/arrow-down.svg?raw'
 
 import styles from './select.module.scss'
 
+import type { ListEventType } from '../List/list'
+
 const Select = ({
     name,
     value,
@@ -22,8 +24,9 @@ const Select = ({
     label,
     subText,
     disabled,
-    className,
+    updateValue = true,
     position = 'bottom',
+    className,
     onChange,
     ...rest
 }: ReactSelectProps) => {
@@ -41,18 +44,22 @@ const Select = ({
 
     let popoverInstance: any
 
-    const select = (payload: any) => {
+    const select = (event: ListEventType) => {
         closePopover(`.w-options-${name}`)
 
-        setValue(payload.name)
+        if (updateValue) {
+            setValue(event.name)
+        }
 
         onChange?.({
-            select: name,
-            ...payload
+            ...event,
+            select: name
         })
     }
 
     useEffect(() => {
+        let observer: ResizeObserver | undefined
+
         if (position === 'modal') {
             modal({
                 trigger: `.w-select-${name}`,
@@ -76,7 +83,8 @@ const Select = ({
                     dialogElement.style.width = `${width}px`
                 })
 
-                new ResizeObserver(() => resize()).observe(document.body)
+                observer = new ResizeObserver(() => resize())
+                observer.observe(document.body)
 
                 popoverInstance = popover({
                     trigger: `.w-select-${name}`,
@@ -95,6 +103,7 @@ const Select = ({
 
         return () => {
             popoverInstance?.remove()
+            observer?.unobserve(document.body)
         }
     }, [])
 
@@ -114,8 +123,6 @@ const Select = ({
                 <span
                     dangerouslySetInnerHTML={{ __html: ArrowDown }}
                     style={{
-                        height: '18px',
-                        position: 'absolute',
                         right: 0,
                         pointerEvents: 'none'
                     }}

package/components/Select/select.ts

@@ -2,6 +2,10 @@ import type { PopoverPosition } from '../../utils/popover'
 
 import type { ListEventType, ListProps } from '../List/list'
 
+export type SelectEventType = {
+    select: string
+} & ListEventType
+
 export type SelectProps = {
     name: string
     value?: string
@@ -9,13 +13,14 @@ export type SelectProps = {
     label?: string
     subText?: string
     disabled?: boolean
+    updateValue?: boolean
     position?: PopoverPosition | 'modal'
 } & ListProps
 
 export type SvelteSelectProps = {
-    onChange?: (event: ListEventType & { select: string }) => void
+    onChange?: (event: SelectEventType) => void
 } & SelectProps
 
 export type ReactSelectProps = {
-    onChange?: (event: ListEventType & { select: string }) => void
+    onChange?: (event: SelectEventType) => void
 } & SelectProps

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/components/Table/Table.svelte

@@ -12,7 +12,7 @@
     export let striped: TableProps['striped'] = null
     export let offsetStripe: TableProps['offsetStripe'] = false
     export let compact: TableProps['compact'] = false
-    export let maxHeight: TableProps['maxHeight'] = 0
+    export let maxHeight: TableProps['maxHeight'] = ''
     export let className: TableProps['className'] = ''
 
     const classes = classNames([

package/components/Table/table.ts

@@ -6,6 +6,6 @@ export type TableProps = {
     striped?: 'column' | 'row' | null
     offsetStripe?: boolean
     compact?: boolean
-    maxHeight?: number
+    maxHeight?: string
     className?: string
 }

package/icons/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5786 0.360618C18.1158 0.864272 18.143 1.70806 17.6394 2.24526L8.4943 12L17.6394 21.7547C18.143 22.292 18.1158 23.1358 17.5786 23.6395C17.0413 24.143 16.1976 24.1158 15.6939 23.5787L5.6938 12.9119C5.213 12.3991 5.213 11.601 5.6938 11.0881L15.6939 0.421418C16.1976 -0.11581 17.0414 -0.143009 17.5786 0.360618Z" fill="currentColor"/>
+</svg>

package/icons/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.42142 23.6394C5.88419 23.1357 5.85699 22.2919 6.36062 21.7547L15.5057 12L6.36062 2.2453C5.85699 1.708 5.88419 0.8642 6.42142 0.3605C6.95865 -0.143 7.80243 -0.115799 8.30606 0.421301L18.3062 11.0881C18.787 11.6009 18.787 12.399 18.3062 12.9119L8.30606 23.5786C7.80243 24.1158 6.95865 24.143 6.42142 23.6394Z" fill="currentColor"/>
+</svg>

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/order.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="M5.8125 20V4M5.8125 4L10.625 9.09091M5.8125 4L1 9.09091M18.1875 4V20M18.1875 20L23 14.9091M18.1875 20L13.375 14.9091" 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

@@ -1,12 +1,19 @@
 declare module 'webcoreui/icons' {
     export const alert: string
 	export const arrowDown: string
+	export const arrowLeft: string
+	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
 	export const search: string
 	export const sun: string
 	export const warning: string

package/icons.js

@@ -1,11 +1,18 @@
 export { default as alert } from './icons/alert.svg?raw'
 export { default as arrowDown } from './icons/arrow-down.svg?raw'
+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'
 export { default as search } from './icons/search.svg?raw'
 export { default as sun } from './icons/sun.svg?raw'
 export { default as warning } from './icons/warning.svg?raw'

package/index.d.ts

@@ -1,17 +1,17 @@
 
-type ModalCallback = {
+export type ModalCallback = {
     trigger: Element | null
     modal: HTMLElement
 }
 
-type Modal = {
+export type Modal = {
     trigger: string
     modal: string
     onOpen?: (args: ModalCallback) => unknown
     onClose?: (args: ModalCallback) => unknown
 }
 
-type PopoverPosition = 'top'
+export type PopoverPosition = 'top'
     | 'top-start'
     | 'top-end'
     | 'left'
@@ -24,13 +24,13 @@ type PopoverPosition = 'top'
     | 'bottom-start'
     | 'bottom-end'
 
-type PopoverCallback = {
+export type PopoverCallback = {
     trigger: HTMLElement
     popover: HTMLElement
     position: PopoverPosition | undefined
 }
 
-type Popover = {
+export type Popover = {
     trigger: string
     popover: string
     position?: PopoverPosition
@@ -40,7 +40,7 @@ type Popover = {
     onClose?: (args: PopoverCallback) => unknown
 }
 
-type Toast = {
+export type Toast = {
     element: string
     timeout?: number
     title?: string

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.4.1",
+    "version": "0.6.0",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
@@ -12,20 +12,13 @@
         "create-component": "node scripts/createComponent.js",
         "lint": "eslint src/**/* --fix"
     },
-    "dependencies": {
+    "devDependencies": {
         "@astrojs/check": "0.7.0",
         "@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 +27,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": {