webcoreui 0.4.1 → 0.6.0

package/astro.d.ts

@@ -1,65 +1,118 @@
-import type { AccordionProps } from './components/Accordion/accordion'
-import type { AlertProps } from './components/Alert/alert'
-import type { AvatarProps } from './components/Avatar/avatar'
-import type { BadgeProps } from './components/Badge/badge'
-import type { ButtonProps } from './components/Button/button'
-import type { CardProps } from './components/Card/card'
-import type { CheckboxProps } from './components/Checkbox/checkbox'
-import type { CollapsibleProps } from './components/Collapsible/collapsible'
-import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
-import type { GroupProps } from './components/Group/group'
-import type { IconProps } from './components/Icon/icon'
-import type { InputProps } from './components/Input/input'
-import type { ListProps } from './components/List/list'
-import type { MenuProps } from './components/Menu/menu'
-import type { ModalProps } from './components/Modal/modal'
-import type { PopoverProps } from './components/Popover/popover'
-import type { ProgressProps } from './components/Progress/progress'
-import type { RadioProps } from './components/Radio/radio'
-import type { RatingProps } from './components/Rating/rating'
-import type { SelectProps } from './components/Select/select'
-import type { SheetProps } from './components/Sheet/sheet'
-import type { SliderProps } from './components/Slider/slider'
-import type { SpinnerProps } from './components/Spinner/spinner'
-import type { SwitchProps } from './components/Switch/switch'
-import type { TableProps } from './components/Table/table'
-import type { TabsProps } from './components/Tabs/tabs'
-import type { TextareaProps } from './components/Textarea/textarea'
-import type { ThemeSwitcherProps } from './components/ThemeSwitcher/themeswitcher'
-import type { TimelineProps } from './components/Timeline/timeline'
-import type { TimelineItemProps } from './components/TimelineItem/timelineitem'
-import type { ToastProps } from './components/Toast/toast'
+import type { AccordionProps as WAccordionProps } from './components/Accordion/accordion'
+import type { AlertProps as WAlertProps } from './components/Alert/alert'
+import type { AvatarProps as WAvatarProps } from './components/Avatar/avatar'
+import type { BadgeProps as WBadgeProps } from './components/Badge/badge'
+import type { BreadcrumbProps as WBreadcrumbProps } from './components/Breadcrumb/breadcrumb'
+import type { ButtonProps as WButtonProps } from './components/Button/button'
+import type { CardProps as WCardProps } from './components/Card/card'
+import type { CarouselProps as WCarouselProps } from './components/Carousel/carousel'
+import type { CheckboxProps as WCheckboxProps } from './components/Checkbox/checkbox'
+import type { CollapsibleProps as WCollapsibleProps } from './components/Collapsible/collapsible'
+import type { ConditionalWrapperProps as WConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { DataTableProps as WDataTableProps } from './components/DataTable/datatable'
+import type { FooterProps as WFooterProps } from './components/Footer/footer'
+import type { GroupProps as WGroupProps } from './components/Group/group'
+import type { IconProps as WIconProps } from './components/Icon/icon'
+import type { InputProps as WInputProps } from './components/Input/input'
+import type { ListProps as WListProps } from './components/List/list'
+import type { MasonryProps as WMasonryProps } from './components/Masonry/masonry'
+import type { MenuProps as WMenuProps } from './components/Menu/menu'
+import type { ModalProps as WModalProps } from './components/Modal/modal'
+import type { PaginationProps as WPaginationProps } from './components/Pagination/pagination'
+import type { PopoverProps as WPopoverProps } from './components/Popover/popover'
+import type { ProgressProps as WProgressProps } from './components/Progress/progress'
+import type { RadioProps as WRadioProps } from './components/Radio/radio'
+import type { RatingProps as WRatingProps } from './components/Rating/rating'
+import type { SelectProps as WSelectProps } from './components/Select/select'
+import type { SheetProps as WSheetProps } from './components/Sheet/sheet'
+import type { SidebarProps as WSidebarProps } from './components/Sidebar/sidebar'
+import type { SliderProps as WSliderProps } from './components/Slider/slider'
+import type { SpinnerProps as WSpinnerProps } from './components/Spinner/spinner'
+import type { SwitchProps as WSwitchProps } from './components/Switch/switch'
+import type { TableProps as WTableProps } from './components/Table/table'
+import type { TabsProps as WTabsProps } from './components/Tabs/tabs'
+import type { TextareaProps as WTextareaProps } from './components/Textarea/textarea'
+import type { ThemeSwitcherProps as WThemeSwitcherProps } from './components/ThemeSwitcher/themeswitcher'
+import type { TimelineProps as WTimelineProps } from './components/Timeline/timeline'
+import type { TimelineItemProps as WTimelineItemProps } from './components/TimelineItem/timelineitem'
+import type { ToastProps as WToastProps } from './components/Toast/toast'
 
 declare module 'webcoreui/astro' {
-    export function Accordion(_props: AccordionProps): any
-	export function Alert(_props: AlertProps): any
-	export function Avatar(_props: AvatarProps): any
-	export function Badge(_props: BadgeProps): any
-	export function Button(_props: ButtonProps): any
-	export function Card(_props: CardProps): any
-	export function Checkbox(_props: CheckboxProps): any
-	export function Collapsible(_props: CollapsibleProps): any
-	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
-	export function Group(_props: GroupProps): any
-	export function Icon(_props: IconProps): any
-	export function Input(_props: InputProps): any
-	export function List(_props: ListProps): any
-	export function Menu(_props: MenuProps): any
-	export function Modal(_props: ModalProps): any
-	export function Popover(_props: PopoverProps): any
-	export function Progress(_props: ProgressProps): any
-	export function Radio(_props: RadioProps): any
-	export function Rating(_props: RatingProps): any
-	export function Select(_props: SelectProps): any
-	export function Sheet(_props: SheetProps): any
-	export function Slider(_props: SliderProps): any
-	export function Spinner(_props: SpinnerProps): any
-	export function Switch(_props: SwitchProps): any
-	export function Table(_props: TableProps): any
-	export function Tabs(_props: TabsProps): any
-	export function Textarea(_props: TextareaProps): any
-	export function ThemeSwitcher(_props: ThemeSwitcherProps): any
-	export function Timeline(_props: TimelineProps): any
-	export function TimelineItem(_props: TimelineItemProps): any
-	export function Toast(_props: ToastProps): any
+    export function Accordion(_props: WAccordionProps): any
+	export function Alert(_props: WAlertProps): any
+	export function Avatar(_props: WAvatarProps): any
+	export function Badge(_props: WBadgeProps): any
+	export function Breadcrumb(_props: WBreadcrumbProps): any
+	export function Button(_props: WButtonProps): any
+	export function Card(_props: WCardProps): any
+	export function Carousel(_props: WCarouselProps): any
+	export function Checkbox(_props: WCheckboxProps): any
+	export function Collapsible(_props: WCollapsibleProps): any
+	export function ConditionalWrapper(_props: WConditionalWrapperProps): any
+	export function DataTable(_props: WDataTableProps): any
+	export function Footer(_props: WFooterProps): any
+	export function Group(_props: WGroupProps): any
+	export function Icon(_props: WIconProps): any
+	export function Input(_props: WInputProps): any
+	export function List(_props: WListProps): any
+	export function Masonry(_props: WMasonryProps): any
+	export function Menu(_props: WMenuProps): any
+	export function Modal(_props: WModalProps): any
+	export function Pagination(_props: WPaginationProps): any
+	export function Popover(_props: WPopoverProps): any
+	export function Progress(_props: WProgressProps): any
+	export function Radio(_props: WRadioProps): any
+	export function Rating(_props: WRatingProps): any
+	export function Select(_props: WSelectProps): any
+	export function Sheet(_props: WSheetProps): any
+	export function Sidebar(_props: WSidebarProps): any
+	export function Slider(_props: WSliderProps): any
+	export function Spinner(_props: WSpinnerProps): any
+	export function Switch(_props: WSwitchProps): any
+	export function Table(_props: WTableProps): any
+	export function Tabs(_props: WTabsProps): any
+	export function Textarea(_props: WTextareaProps): any
+	export function ThemeSwitcher(_props: WThemeSwitcherProps): any
+	export function Timeline(_props: WTimelineProps): any
+	export function TimelineItem(_props: WTimelineItemProps): any
+	export function Toast(_props: WToastProps): any
+
+    export type AccordionProps = WAccordionProps
+	export type AlertProps = WAlertProps
+	export type AvatarProps = WAvatarProps
+	export type BadgeProps = WBadgeProps
+	export type BreadcrumbProps = WBreadcrumbProps
+	export type ButtonProps = WButtonProps
+	export type CardProps = WCardProps
+	export type CarouselProps = WCarouselProps
+	export type CheckboxProps = WCheckboxProps
+	export type CollapsibleProps = WCollapsibleProps
+	export type ConditionalWrapperProps = WConditionalWrapperProps
+	export type DataTableProps = WDataTableProps
+	export type FooterProps = WFooterProps
+	export type GroupProps = WGroupProps
+	export type IconProps = WIconProps
+	export type InputProps = WInputProps
+	export type ListProps = WListProps
+	export type MasonryProps = WMasonryProps
+	export type MenuProps = WMenuProps
+	export type ModalProps = WModalProps
+	export type PaginationProps = WPaginationProps
+	export type PopoverProps = WPopoverProps
+	export type ProgressProps = WProgressProps
+	export type RadioProps = WRadioProps
+	export type RatingProps = WRatingProps
+	export type SelectProps = WSelectProps
+	export type SheetProps = WSheetProps
+	export type SidebarProps = WSidebarProps
+	export type SliderProps = WSliderProps
+	export type SpinnerProps = WSpinnerProps
+	export type SwitchProps = WSwitchProps
+	export type TableProps = WTableProps
+	export type TabsProps = WTabsProps
+	export type TextareaProps = WTextareaProps
+	export type ThemeSwitcherProps = WThemeSwitcherProps
+	export type TimelineProps = WTimelineProps
+	export type TimelineItemProps = WTimelineItemProps
+	export type ToastProps = WToastProps
 }

package/astro.js

@@ -2,23 +2,30 @@ import AccordionComponent from './components/Accordion/Accordion.astro'
 import AlertComponent from './components/Alert/Alert.astro'
 import AvatarComponent from './components/Avatar/Avatar.astro'
 import BadgeComponent from './components/Badge/Badge.astro'
+import BreadcrumbComponent from './components/Breadcrumb/Breadcrumb.astro'
 import ButtonComponent from './components/Button/Button.astro'
 import CardComponent from './components/Card/Card.astro'
+import CarouselComponent from './components/Carousel/Carousel.astro'
 import CheckboxComponent from './components/Checkbox/Checkbox.astro'
 import CollapsibleComponent from './components/Collapsible/Collapsible.astro'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
+import DataTableComponent from './components/DataTable/DataTable.astro'
+import FooterComponent from './components/Footer/Footer.astro'
 import GroupComponent from './components/Group/Group.astro'
 import IconComponent from './components/Icon/Icon.astro'
 import InputComponent from './components/Input/Input.astro'
 import ListComponent from './components/List/List.astro'
+import MasonryComponent from './components/Masonry/Masonry.astro'
 import MenuComponent from './components/Menu/Menu.astro'
 import ModalComponent from './components/Modal/Modal.astro'
+import PaginationComponent from './components/Pagination/Pagination.astro'
 import PopoverComponent from './components/Popover/Popover.astro'
 import ProgressComponent from './components/Progress/Progress.astro'
 import RadioComponent from './components/Radio/Radio.astro'
 import RatingComponent from './components/Rating/Rating.astro'
 import SelectComponent from './components/Select/Select.astro'
 import SheetComponent from './components/Sheet/Sheet.astro'
+import SidebarComponent from './components/Sidebar/Sidebar.astro'
 import SliderComponent from './components/Slider/Slider.astro'
 import SpinnerComponent from './components/Spinner/Spinner.astro'
 import SwitchComponent from './components/Switch/Switch.astro'
@@ -34,23 +41,30 @@ export const Accordion = AccordionComponent
 export const Alert = AlertComponent
 export const Avatar = AvatarComponent
 export const Badge = BadgeComponent
+export const Breadcrumb = BreadcrumbComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
+export const Carousel = CarouselComponent
 export const Checkbox = CheckboxComponent
 export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
+export const DataTable = DataTableComponent
+export const Footer = FooterComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent
 export const List = ListComponent
+export const Masonry = MasonryComponent
 export const Menu = MenuComponent
 export const Modal = ModalComponent
+export const Pagination = PaginationComponent
 export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
 export const Select = SelectComponent
 export const Sheet = SheetComponent
+export const Sidebar = SidebarComponent
 export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
 export const Switch = SwitchComponent

package/components/Avatar/Avatar.astro

@@ -13,7 +13,8 @@ const {
     borderColor,
     borderless,
     reverse,
-    className
+    className,
+    groupClassName
 } = Astro.props
 
 const classes = [
@@ -21,10 +22,16 @@ const classes = [
     borderless && styles.borderless,
     className
 ]
+
+const groupClasses = [
+    styles.group,
+    reverse && styles.reverse,
+    groupClassName
+]
 ---
 
 {Array.isArray(img) ? (
-    <div class:list={[styles.group, reverse && styles.reverse]}
+    <div class:list={groupClasses}
         style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
     >
         {img.map((img, index) => (

package/components/Avatar/Avatar.svelte

@@ -13,6 +13,7 @@
     export let borderless: AvatarProps['borderless'] = false
     export let reverse: AvatarProps['reverse'] = false
     export let className: AvatarProps['className'] = ''
+    export let groupClassName: AvatarProps['groupClassName'] = ''
 
     const classes = classNames([
         styles.avatar,
@@ -22,7 +23,8 @@
 
     const groupStyles = classNames([
         styles.group,
-        reverse && styles.reverse
+        reverse && styles.reverse,
+        groupClassName
     ])
 </script>
 

package/components/Avatar/Avatar.tsx

@@ -13,7 +13,8 @@ const Avatar = ({
     borderColor,
     borderless,
     reverse,
-    className
+    className,
+    groupClassName
 }: AvatarProps) => {
     const classes = classNames([
         styles.avatar,
@@ -23,7 +24,8 @@ const Avatar = ({
 
     const groupStyles = classNames([
         styles.group,
-        reverse && styles.reverse
+        reverse && styles.reverse,
+        groupClassName
     ])
 
     const borderColorStyle = borderColor

package/components/Avatar/avatar.ts

@@ -7,4 +7,5 @@ export type AvatarProps = {
     borderless?: boolean
     reverse?: boolean
     className?: string
+    groupClassName?: string
 }

package/components/Badge/Badge.astro

@@ -8,6 +8,8 @@ interface Props extends BadgeProps {}
 const {
     theme,
     hover,
+    small,
+    rounded,
     className,
     ...rest
 } = Astro.props
@@ -16,6 +18,8 @@ const classes = [
     styles.badge,
     theme && styles[theme],
     hover && styles.hover,
+    small && styles.small,
+    rounded && styles.round,
     className
 ]
 ---

package/components/Badge/Badge.svelte

@@ -6,14 +6,18 @@
     import styles from './badge.module.scss'
 
     export let theme: SvelteBadgeProps['theme'] = null
-    export let onClick: SvelteBadgeProps['onClick'] = null
     export let hover: SvelteBadgeProps['hover'] = false
+    export let small: SvelteBadgeProps['small'] = false
+    export let rounded: SvelteBadgeProps['rounded'] = false
     export let className: SvelteBadgeProps['className'] = ''
+    export let onClick: SvelteBadgeProps['onClick'] = () => {}
 
     const classes = classNames([
         styles.badge,
         theme && styles[theme],
         (onClick || hover) && styles.hover,
+        small && styles.small,
+        rounded && styles.round,
         className
     ])
 </script>

package/components/Badge/Badge.tsx

@@ -9,6 +9,8 @@ const Badge = ({
     theme,
     onClick,
     hover,
+    small,
+    rounded,
     className,
     children,
     ...rest
@@ -17,6 +19,8 @@ const Badge = ({
         styles.badge,
         theme && styles[theme],
         (onClick || hover) && styles.hover,
+        small && styles.small,
+        rounded && styles.round,
         className
     ])
 

package/components/Badge/badge.module.scss

@@ -83,4 +83,12 @@
         @include typography(alert-fg);
         @include background(alert);
     }
+
+    &.small {
+        @include spacing(py-xxs, px-xs);
+    }
+
+    &.round {
+        @include border-radius(lg);
+    }
 }

package/components/Badge/badge.ts

@@ -1,3 +1,5 @@
+import type { MouseEventHandler } from 'svelte/elements'
+
 export type BadgeProps = {
     theme?: 'secondary'
         | 'outline'
@@ -8,15 +10,17 @@ export type BadgeProps = {
         | 'alert'
         | null
     hover?: boolean
+    small?: boolean
+    rounded?: boolean
     className?: string
     [key: string]: any
 }
 
 export type SvelteBadgeProps = {
-    onClick?: (() => any) | null
+    onClick?: MouseEventHandler<HTMLButtonElement>
 } & BadgeProps
 
 export type ReactBadgeProps = {
-    onClick?: (() => any) | null
-    children: React.ReactNode
+    onClick?: React.MouseEventHandler<HTMLButtonElement>
+    children?: React.ReactNode
 } & BadgeProps

package/components/Breadcrumb/Breadcrumb.astro

@@ -0,0 +1,51 @@
+---
+import type { BreadcrumbProps } from './breadcrumb'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+import Icon from '../Icon/Icon.astro'
+
+import styles from './breadcrumb.module.scss'
+
+import type { IconProps } from '../Icon/icon'
+
+interface Props extends BreadcrumbProps {}
+
+const {
+    items,
+    separator,
+    className
+} = Astro.props
+
+const classes = [
+    styles.breadcrumb,
+    className
+]
+---
+
+<ul class:list={classes}>
+    {items?.map((item, index) => (
+        <li>
+            <ConditionalWrapper condition={!!(item.href && index !== items.length - 1)}>
+                <a href={item.href} target={item.target} slot="wrapper">
+                    children
+                </a>
+                {item.icon && (
+                    <Fragment>
+                        {item.icon.startsWith('<svg')
+                            ? <Fragment set:html={item.icon} />
+                            : <Icon type={item.icon as IconProps['type']} />
+                        }
+                    </Fragment>
+                )}
+                {item.label}
+            </ConditionalWrapper>
+        </li>
+        <Fragment>
+            {index < items.length - 1 && (
+                <li>
+                    {separator || <Icon type="arrow-right" />}
+                </li>
+            )}
+        </Fragment>
+    ))}
+</ul>

package/components/Breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import type { BreadcrumbProps } from './breadcrumb'
+
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import ArrowRight from '../../icons/arrow-right.svg?raw'
+
+    import styles from './breadcrumb.module.scss'
+
+    export let items: BreadcrumbProps['items'] = []
+    export let separator: BreadcrumbProps['separator'] = ''
+    export let className: BreadcrumbProps['className'] = ''
+
+    const classes = classNames([
+        styles.breadcrumb,
+        className
+    ])
+</script>
+
+<ul class={classes}>
+    {#each items as item, index}
+        <li>
+            <ConditionalWrapper
+                condition={!!(item.href && index !== items.length - 1)}
+                element="a"
+                href={item.href}
+                target={item.target}
+            >
+                {#if item.icon}
+                    {@html item.icon}
+                {/if}
+                {#if item.label}
+                    {item.label}
+                {/if}
+            </ConditionalWrapper>
+        </li>
+        {#if index < items.length - 1 }
+            <li>
+                {@html separator || ArrowRight}
+            </li>
+        {/if}
+    {/each}
+</ul>

package/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import type { BreadcrumbProps } from './breadcrumb'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import ArrowRight from '../../icons/arrow-right.svg?raw'
+
+import styles from './breadcrumb.module.scss'
+
+const Breadcrumb = ({
+    items,
+    separator,
+    className
+}: BreadcrumbProps) => {
+    const classes = classNames([
+        styles.breadcrumb,
+        className
+    ])
+
+    return (
+        <ul className={classes}>
+            {items?.map((item, index) => (
+                <React.Fragment key={index}>
+                    <li>
+                        <ConditionalWrapper
+                            condition={!!(item.href && index !== items.length - 1)}
+                            wrapper={children => (
+                                <a href={item.href} target={item.target}>{children}</a>
+                            )}
+                        >
+                            {item.icon && <span dangerouslySetInnerHTML={{ __html: item.icon }} />}
+                            {item.label}
+                        </ConditionalWrapper>
+                    </li>
+                    {index < items.length - 1 && (
+                        <li>
+                            {separator
+                                ? separator
+                                : <span dangerouslySetInnerHTML={{ __html: ArrowRight }} />
+                            }
+                        </li>
+                    )}
+                </React.Fragment>
+            ))}
+        </ul>
+    )
+}
+
+export default Breadcrumb

package/components/Breadcrumb/breadcrumb.module.scss

@@ -0,0 +1,26 @@
+@import '../../scss/config.scss';
+
+.breadcrumb {
+    @include layout(flex, v-center, sm, wrap);
+    @include spacing(0);
+
+    list-style-type: none;
+
+    li {
+        @include layout(flex, v-center, xs);
+        @include spacing(m0);
+
+        a {
+            @include layout(flex, v-center, xs);
+            @include typography(none, primary-20);
+
+            &:hover {
+                @include typography(primary);
+            }
+        }
+    }
+
+    svg {
+        @include size(14px);
+    }
+}

package/components/Breadcrumb/breadcrumb.ts

@@ -0,0 +1,12 @@
+import type { ButtonProps } from '../Button/button'
+
+export type BreadcrumbProps = {
+    items: {
+        icon?: string
+        label?: string
+        href?: string
+        target?: ButtonProps['target']
+    }[]
+    separator?: string
+    className?: string
+}

package/components/Button/button.module.scss

@@ -2,7 +2,7 @@
 
 .button {
     @include layout(inline-flex, center, xs);
-    @include typography(default, primary-50, none);
+    @include typography(default, primary-50, none, normal);
     @include spacing(py-sm, px-md);
     @include border-radius(xs);
     @include border(0);
@@ -38,6 +38,11 @@
             @include typography(primary);
             box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
         }
+
+        &[disabled] {
+            @include typography(primary-30);
+            box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-30);
+        }
     }
 
     &.flat {