webcoreui 0.8.0 → 0.9.0

package/README.md

@@ -20,6 +20,12 @@
             alt="License"
         />
     </a>
+    <a href="https://github.com/Frontendland/webcoreui/actions">
+        <img
+            src="https://img.shields.io/github/actions/workflow/status/Frontendland/webcoreui/checks.yml"
+            alt="Build"
+        />
+    </a>
 </p>
 
 > [!IMPORTANT]
@@ -113,6 +119,9 @@ html body {
     // Banner component
     --w-banner-top: 0;
 
+    // BottomNavigation component
+    --w-bottom-navigation-max-width: auto;
+
     // Checkbox component
     --w-checkbox-color: var(--w-color-primary);
 
@@ -222,6 +231,7 @@ import { Accordion } from 'webcoreui/react'
 - [Avatar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Avatar)
 - [Badge](https://github.com/Frontendland/webcoreui/tree/main/src/components/Badge)
 - [Banner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Banner)
+- [BottomNavigation](https://github.com/Frontendland/webcoreui/tree/main/src/components/BottomNavigation)
 - [Breadcrumb](https://github.com/Frontendland/webcoreui/tree/main/src/components/Breadcrumb)
 - [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
 - [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)
@@ -229,8 +239,11 @@ import { Accordion } from 'webcoreui/react'
 - [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox)
 - [Collapsible](https://github.com/Frontendland/webcoreui/tree/main/src/components/Collapsible)
 - [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
+- [Copy](https://github.com/Frontendland/webcoreui/tree/main/src/components/Copy)
 - [DataTable](https://github.com/Frontendland/webcoreui/tree/main/src/components/DataTable)
+- [Flex](https://github.com/Frontendland/webcoreui/tree/main/src/components/Flex)
 - [Footer](https://github.com/Frontendland/webcoreui/tree/main/src/components/Footer)
+- [Grid](https://github.com/Frontendland/webcoreui/tree/main/src/components/Grid)
 - [Group](https://github.com/Frontendland/webcoreui/tree/main/src/components/Group)
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
 - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
@@ -265,8 +278,11 @@ import { Accordion } from 'webcoreui/react'
 ## Blocks
 
 - [BlogCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/BlogCard)
+- [ComponentMap](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ComponentMap)
+- [DeviceMockup](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/DeviceMockup)
 - [ErrorPage](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ErrorPage)
 - [FAQ](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/FAQ)
+- [GridWithIcons](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/GridWithIcons)
 - [Hero](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Hero)
 - [IconList](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/IconList)
 - [SettingCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SettingCard)

package/astro.d.ts

@@ -4,6 +4,7 @@ import type { AspectRatioProps as WAspectRatioProps } from './components/AspectR
 import type { AvatarProps as WAvatarProps } from './components/Avatar/avatar'
 import type { BadgeProps as WBadgeProps } from './components/Badge/badge'
 import type { BannerProps as WBannerProps } from './components/Banner/banner'
+import type { BottomNavigationProps as WBottomNavigationProps } from './components/BottomNavigation/bottomnavigation'
 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'
@@ -11,8 +12,11 @@ import type { CarouselProps as WCarouselProps } from './components/Carousel/caro
 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 { CopyProps as WCopyProps } from './components/Copy/copy'
 import type { DataTableProps as WDataTableProps } from './components/DataTable/datatable'
+import type { FlexProps as WFlexProps } from './components/Flex/flex'
 import type { FooterProps as WFooterProps } from './components/Footer/footer'
+import type { GridProps as WGridProps } from './components/Grid/grid'
 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'
@@ -44,6 +48,11 @@ import type { TimelineProps as WTimelineProps } from './components/Timeline/time
 import type { TimelineItemProps as WTimelineItemProps } from './components/TimelineItem/timelineitem'
 import type { ToastProps as WToastProps } from './components/Toast/toast'
 
+import type { DataTableEventType as WDataTableEventType, HeadingObject as WHeadingObject } from './components/DataTable/datatable.ts'
+import type { ListEventType as WListEventType } from './components/List/list.ts'
+import type { PaginationEventType as WPaginationEventType } from './components/Pagination/pagination.ts'
+import type { SelectEventType as WSelectEventType } from './components/Select/select.ts'
+
 declare module 'webcoreui/astro' {
     export function Accordion(_props: WAccordionProps): any
 	export function Alert(_props: WAlertProps): any
@@ -51,6 +60,7 @@ declare module 'webcoreui/astro' {
 	export function Avatar(_props: WAvatarProps): any
 	export function Badge(_props: WBadgeProps): any
 	export function Banner(_props: WBannerProps): any
+	export function BottomNavigation(_props: WBottomNavigationProps): any
 	export function Breadcrumb(_props: WBreadcrumbProps): any
 	export function Button(_props: WButtonProps): any
 	export function Card(_props: WCardProps): any
@@ -58,8 +68,11 @@ declare module 'webcoreui/astro' {
 	export function Checkbox(_props: WCheckboxProps): any
 	export function Collapsible(_props: WCollapsibleProps): any
 	export function ConditionalWrapper(_props: WConditionalWrapperProps): any
+	export function Copy(_props: WCopyProps): any
 	export function DataTable(_props: WDataTableProps): any
+	export function Flex(_props: WFlexProps): any
 	export function Footer(_props: WFooterProps): any
+	export function Grid(_props: WGridProps): any
 	export function Group(_props: WGroupProps): any
 	export function Icon(_props: WIconProps): any
 	export function Input(_props: WInputProps): any
@@ -97,6 +110,7 @@ declare module 'webcoreui/astro' {
 	export type AvatarProps = WAvatarProps
 	export type BadgeProps = WBadgeProps
 	export type BannerProps = WBannerProps
+	export type BottomNavigationProps = WBottomNavigationProps
 	export type BreadcrumbProps = WBreadcrumbProps
 	export type ButtonProps = WButtonProps
 	export type CardProps = WCardProps
@@ -104,8 +118,11 @@ declare module 'webcoreui/astro' {
 	export type CheckboxProps = WCheckboxProps
 	export type CollapsibleProps = WCollapsibleProps
 	export type ConditionalWrapperProps = WConditionalWrapperProps
+	export type CopyProps = WCopyProps
 	export type DataTableProps = WDataTableProps
+	export type FlexProps = WFlexProps
 	export type FooterProps = WFooterProps
+	export type GridProps = WGridProps
 	export type GroupProps = WGroupProps
 	export type IconProps = WIconProps
 	export type InputProps = WInputProps
@@ -136,4 +153,10 @@ declare module 'webcoreui/astro' {
 	export type TimelineProps = WTimelineProps
 	export type TimelineItemProps = WTimelineItemProps
 	export type ToastProps = WToastProps
+
+    export type DataTableEventType = WDataTableEventType
+	export type HeadingObject = WHeadingObject
+	export type ListEventType = WListEventType
+	export type PaginationEventType = WPaginationEventType
+	export type SelectEventType = WSelectEventType
 }

package/astro.js

@@ -4,6 +4,7 @@ import AspectRatioComponent from './components/AspectRatio/AspectRatio.astro'
 import AvatarComponent from './components/Avatar/Avatar.astro'
 import BadgeComponent from './components/Badge/Badge.astro'
 import BannerComponent from './components/Banner/Banner.astro'
+import BottomNavigationComponent from './components/BottomNavigation/BottomNavigation.astro'
 import BreadcrumbComponent from './components/Breadcrumb/Breadcrumb.astro'
 import ButtonComponent from './components/Button/Button.astro'
 import CardComponent from './components/Card/Card.astro'
@@ -11,8 +12,11 @@ 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 CopyComponent from './components/Copy/Copy.astro'
 import DataTableComponent from './components/DataTable/DataTable.astro'
+import FlexComponent from './components/Flex/Flex.astro'
 import FooterComponent from './components/Footer/Footer.astro'
+import GridComponent from './components/Grid/Grid.astro'
 import GroupComponent from './components/Group/Group.astro'
 import IconComponent from './components/Icon/Icon.astro'
 import InputComponent from './components/Input/Input.astro'
@@ -50,6 +54,7 @@ export const AspectRatio = AspectRatioComponent
 export const Avatar = AvatarComponent
 export const Badge = BadgeComponent
 export const Banner = BannerComponent
+export const BottomNavigation = BottomNavigationComponent
 export const Breadcrumb = BreadcrumbComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
@@ -57,8 +62,11 @@ export const Carousel = CarouselComponent
 export const Checkbox = CheckboxComponent
 export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
+export const Copy = CopyComponent
 export const DataTable = DataTableComponent
+export const Flex = FlexComponent
 export const Footer = FooterComponent
+export const Grid = GridComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent

package/components/Accordion/accordion.module.scss

@@ -44,6 +44,7 @@
                 @include size(15px);
                 @include typography(primary-20);
                 pointer-events: none;
+                min-width: 15px;
             }
 
             &[data-open="true"] {

package/components/Badge/Badge.svelte

@@ -10,7 +10,7 @@
     export let small: SvelteBadgeProps['small'] = false
     export let rounded: SvelteBadgeProps['rounded'] = false
     export let className: SvelteBadgeProps['className'] = ''
-    export let onClick: SvelteBadgeProps['onClick'] = () => {}
+    export let onClick: SvelteBadgeProps['onClick'] = null
 
     const classes = classNames([
         styles.badge,

package/components/Badge/badge.ts

@@ -17,7 +17,7 @@ export type BadgeProps = {
 }
 
 export type SvelteBadgeProps = {
-    onClick?: MouseEventHandler<HTMLButtonElement>
+    onClick?: MouseEventHandler<HTMLButtonElement> | null
 } & BadgeProps
 
 export type ReactBadgeProps = {

package/components/BottomNavigation/BottomNavigation.astro

@@ -0,0 +1,51 @@
+---
+import type { BottomNavigationProps } from './bottomnavigation'
+
+import Icon from '../Icon/Icon.astro'
+
+import styles from './bottomnavigation.module.scss'
+
+import type { IconProps } from '../Icon/icon'
+
+interface Props extends BottomNavigationProps {}
+
+const {
+    items,
+    separated,
+    floating,
+    maxWidth,
+    className
+} = Astro.props
+
+const classes = [
+    styles.nav,
+    separated && styles.separated,
+    maxWidth && styles.bordered,
+    floating && styles.floating,
+    className
+]
+
+const styleVariable = maxWidth
+    ? `--w-bottom-navigation-max-width: ${maxWidth};`
+    : null
+---
+
+<nav class:list={classes} style={styleVariable}>
+    <ul>
+        {items?.map(item => ({ ...item, element: item.href ? 'a' : 'div' })).map(item => (
+            <li data-tooltip={item.tooltip} class:list={[item.icon && styles['with-icon']]}>
+                <item.element {...{ href: item.href, target: item.target, class: styles.item }}>
+                    {item.icon && (
+                        <Fragment>
+                            {item.icon?.startsWith('<svg')
+                                ? <Fragment set:html={item.icon} />
+                                : <Icon type={item.icon as IconProps['type']} />
+                            }
+                        </Fragment>
+                    )}
+                    {item.name}
+                </item.element>
+            </li>
+        ))}
+    </ul>
+</nav>

package/components/BottomNavigation/BottomNavigation.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import type { BottomNavigationProps } from './bottomnavigation'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './bottomnavigation.module.scss'
+
+    export let items: BottomNavigationProps['items'] = []
+    export let separated: BottomNavigationProps['separated'] = false
+    export let floating: BottomNavigationProps['floating'] = false
+    export let maxWidth: BottomNavigationProps['maxWidth'] = ''
+    export let className: BottomNavigationProps['className'] = ''
+
+    const classes = classNames([
+        styles.nav,
+        separated && styles.separated,
+        maxWidth && styles.bordered,
+        floating && styles.floating,
+        className
+    ])
+
+    const styleVariable = maxWidth
+        ? `--w-bottom-navigation-max-width: ${maxWidth};`
+        : null
+</script>
+
+<nav class={classes} style={styleVariable}>
+    <ul>
+        {#each items as item}
+            <li data-tooltip={item.tooltip} class={classNames([item.icon && styles['with-icon']])}>
+                <svelte:element
+                    this={item.href ? 'a' : 'div'}
+                    href={item.href}
+                    target={item.target}
+                    class={styles.item}
+                >
+                    {#if item.icon}
+                        {@html item.icon}
+                    {/if}
+                    {item.name}
+                </svelte:element>
+            </li>
+        {/each}
+    </ul>
+</nav>

package/components/BottomNavigation/BottomNavigation.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import type { BottomNavigationProps } from './bottomnavigation'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './bottomnavigation.module.scss'
+
+type ElementType = BottomNavigationProps['items'][0] & {
+    className: string
+    dangerouslySetInnerHTML: {
+        __html: string
+    }
+}
+
+const BottomNavigation = ({
+    items,
+    separated,
+    floating,
+    maxWidth,
+    className
+}: BottomNavigationProps) => {
+    const classes = classNames([
+        styles.nav,
+        separated && styles.separated,
+        maxWidth && styles.bordered,
+        floating && styles.floating,
+        className
+    ])
+
+    const styleVariable = maxWidth
+        ? { '--w-bottom-navigation-max-width': maxWidth } as React.CSSProperties
+        : undefined
+
+    const Element = ({ href, ...rest }: ElementType) => href
+        ? <a {...rest} />
+        : <div {...rest} />
+
+    return (
+        <nav className={classes} style={styleVariable}>
+            <ul>
+                {items?.map((item, index) => (
+                    <li
+                        key={index}
+                        data-tooltip={item.tooltip}
+                        className={classNames([item.icon && styles['with-icon']])}
+                    >
+                        <Element
+                            href={item.href}
+                            target={item.target}
+                            className={styles.item}
+                            dangerouslySetInnerHTML={{ __html: item.icon
+                                ? `${item.icon} ${item.name}`
+                                : (item.name || '')
+                            }}
+                        />
+                    </li>
+                ))}
+            </ul>
+        </nav>
+    )
+}
+
+export default BottomNavigation

package/components/BottomNavigation/bottomnavigation.module.scss

@@ -0,0 +1,70 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-bottom-navigation-max-width: auto;
+}
+
+.nav {
+    @include background(primary-60);
+    @include position(fixed, b0, l0, r0);
+    @include layer(header);
+    @include border(top, primary-50);
+
+    &.separated ul li:not(:last-child) {
+        @include border(right, primary-50);
+    }
+
+    &.separated.bordered ul {
+        @include border(left, primary-50);
+        @include border(right, primary-50);
+    }
+
+    &.floating {
+        @include position(l20px, r20px, b20px);
+        @include border-radius(xl);
+        @include border(0);
+
+        &:not(.bordered) {
+            li:first-child .item {
+                @include border-radius(xl, left);
+            }
+    
+            li:last-child .item {
+                @include border-radius(xl, right);
+            }
+        }
+    }
+
+    ul {
+        @include spacing(none-auto, p0);
+        @include layout(flex, h-center);
+
+        max-width: var(--w-bottom-navigation-max-width);
+        list-style-type: none;
+
+        li {
+            @include spacing(mb-0);
+
+            flex: 1;
+
+            &.with-icon .item {
+                @include spacing(pt-sm, pb-xs);
+            }
+            
+            .item {
+                @include layout(flex, column, center, xs);
+                @include spacing(py-sm);
+                @include size('h100%');
+                @include transition(background);
+                @include typography(md, primary-10, none);
+
+                user-select: none;
+                cursor: pointer;
+
+                &:hover {
+                    @include background(primary-50);
+                }
+            }
+        }
+    }
+}

package/components/BottomNavigation/bottomnavigation.ts

@@ -0,0 +1,16 @@
+import type { ButtonProps } from '../Button/button'
+import type { IconProps } from '../Icon/icon'
+
+export type BottomNavigationProps = {
+    items: {
+        name?: string
+        href?: string
+        target?: ButtonProps['target']
+        icon?: IconProps['type'] | string
+        tooltip?: string
+    }[]
+    separated?: boolean
+    floating?: boolean
+    maxWidth?: string
+    className?: string
+}

package/components/Card/card.module.scss

@@ -4,6 +4,7 @@
     @include border(primary-50);
     @include border-radius(md);
     @include layout(flex, column);
+    @include background(primary-70);
 
     &.secondary {
         @include background(primary-60);

package/components/Checkbox/Checkbox.astro

@@ -15,7 +15,8 @@ const {
     subText,
     disabled,
     color,
-    className
+    className,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -34,7 +35,12 @@ const style = color
         <div class={styles.wrapper} slot="wrapper">
             children
         </div>
-        <input type="checkbox" checked={checked} disabled={disabled} />
+        <input
+            type="checkbox"
+            checked={checked}
+            disabled={disabled}
+            {...rest}
+        />
         <span class={styles.check}>
             <Fragment set:html={check} />
         </span>

package/components/Checkbox/Checkbox.svelte

@@ -39,6 +39,7 @@
             checked={checked}
             disabled={disabled}
             on:click={onClick}
+            {...$$restProps}
         />
         <span class={styles.check}>
             {@html check}

package/components/Checkbox/Checkbox.tsx

@@ -16,7 +16,8 @@ const Checkbox = ({
     disabled,
     color,
     className,
-    onClick
+    onClick,
+    ...rest
 }: ReactCheckboxProps) => {
     const classes = classNames([
         styles.checkbox,
@@ -43,6 +44,7 @@ const Checkbox = ({
                     defaultChecked={checked}
                     disabled={disabled}
                     onClick={onClick}
+                    {...rest}
                 />
                 <span
                     className={styles.check}

package/components/Checkbox/checkbox.ts

@@ -7,6 +7,7 @@ export type CheckboxProps = {
     disabled?: boolean
     color?: string
     className?: string
+    [key: string]: any
 }
 
 export type SvelteCheckboxProps = {

package/components/Copy/Copy.astro

@@ -0,0 +1,74 @@
+---
+import type { CopyProps } from './copy'
+
+import Badge from '../Badge/Badge.astro'
+import Icon from '../Icon/Icon.astro'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './copy.module.scss'
+
+import type { IconProps } from '../Icon/icon'
+
+interface Props extends CopyProps {}
+
+const {
+    tooltip,
+    tooltipPosition,
+    copyIcon = 'copy',
+    copiedIcon = 'circle-check',
+    className,
+    ...rest
+} = Astro.props
+
+const classes = classNames([
+    styles.copy,
+    className
+])
+---
+
+<Badge
+    {...rest}
+    className={classes}
+    data-tooltip={tooltip}
+    data-position={tooltipPosition}
+>
+    <slot />
+    <div class={styles.icons}>
+        <button
+            class={styles['copy-icon']}
+            data-id="w-copy"
+        >
+            {copyIcon?.startsWith('<svg')
+                ? <Fragment set:html={copyIcon} />
+                : <Icon type={copyIcon as IconProps['type']} />
+            }
+        </button>
+        <span class={styles.copied}>
+            {copiedIcon?.startsWith('<svg')
+                ? <Fragment set:html={copiedIcon} />
+                : <Icon type={copiedIcon as IconProps['type']} />
+            }
+        </span>
+    </div>
+</Badge>
+
+<script>
+    import { on } from '../../utils/DOMUtils'
+
+    on('[data-id="w-copy"]', 'click', (event: Event) => {
+        const copy = event.currentTarget as HTMLButtonElement
+        const copied = copy.nextElementSibling as HTMLSpanElement
+        const badge = copy.parentElement?.parentElement as HTMLElement
+
+        const text = copy.parentElement?.previousSibling?.textContent?.trim()
+
+        copy.style.opacity = '0'
+        copy.style.pointerEvents = 'none'
+
+        copied.style.opacity = '1'
+        badge.removeAttribute('data-tooltip')
+
+        navigator.clipboard.writeText(text as string)
+    }, true)
+</script>

package/components/Copy/Copy.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import type { CopyProps } from './copy'
+
+    import Badge from '../Badge/Badge.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import circleCheck from '../../icons/circle-check.svg?raw'
+    import copy from '../../icons/copy.svg?raw'
+
+    import styles from './copy.module.scss'
+
+    export let tooltip: CopyProps['tooltip'] = ''
+    export let tooltipPosition: CopyProps['tooltipPosition'] = null
+    export let copyIcon: CopyProps['copyIcon'] = ''
+    export let copiedIcon: CopyProps['copiedIcon'] = ''
+    export let className: CopyProps['className'] = ''
+
+    const classes = classNames([
+        styles.copy,
+        className
+    ])
+
+    let copyButton: HTMLButtonElement
+    let copiedButton: HTMLSpanElement
+
+    const copyText = () => {
+        const text = copyButton.parentElement?.previousSibling?.textContent?.trim()
+            || (copyButton.parentElement?.previousSibling as Text)?.wholeText?.trim()
+            || copyButton.parentElement?.previousElementSibling?.textContent?.trim()
+
+        copyButton.style.opacity = '0'
+        copyButton.style.pointerEvents = 'none'
+
+        copiedButton.style.opacity = '1'
+        tooltip = ''
+
+        navigator.clipboard.writeText(text as string)
+    }
+</script>
+
+<Badge
+    {...$$restProps}
+    className={classes}
+    data-tooltip={tooltip || undefined}
+    data-position={tooltipPosition}
+>
+    <slot />
+    <div class={styles.icons}>
+        <button
+            class={styles['copy-icon']}
+            bind:this={copyButton}
+            on:click={copyText}
+        >
+            {@html copyIcon || copy}
+        </button>
+        <span class={styles.copied} bind:this={copiedButton}>
+            {@html copiedIcon || circleCheck}
+        </span>
+    </div>
+</Badge>