webcoreui 0.2.0 → 0.3.0

package/README.md

@@ -113,6 +113,10 @@ html body {
     // Checkbox component
     --w-checkbox-color: var(--w-color-primary);
 
+    // Collapsible
+    --w-collapsible-initial-height: 0;
+    --w-collapsible-max-height: 100%;
+
     // Progress component
     --w-progress-color: var(--w-color-primary);
     --w-progress-background: var(--w-color-primary-50);
@@ -197,19 +201,23 @@ import { Accordion } from 'webcoreui/react'
 - [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
 - [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)
 - [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)
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
 - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
 - [Menu](https://github.com/Frontendland/webcoreui/tree/main/src/components/Menu)
 - [Modal](https://github.com/Frontendland/webcoreui/tree/main/src/components/Modal)
+- [Popover](https://github.com/Frontendland/webcoreui/tree/main/src/components/Popover)
 - [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
+- [Sheet](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sheet)
 - [Slider](https://github.com/Frontendland/webcoreui/tree/main/src/components/Slider)
 - [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
 - [Table](https://github.com/Frontendland/webcoreui/tree/main/src/components/Table)
 - [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
+- [Textarea](https://github.com/Frontendland/webcoreui/tree/main/src/components/Textarea)
 - [ThemeSwitcher](https://github.com/Frontendland/webcoreui/tree/main/src/components/ThemeSwitcher)
 - [Timeline](https://github.com/Frontendland/webcoreui/blob/main/src/pages/timeline.astro)
 - [Toast](https://github.com/Frontendland/webcoreui/tree/main/src/components/Toast)

package/astro.d.ts

@@ -5,19 +5,23 @@ 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 { IconProps } from './components/Icon/icon'
 import type { InputProps } from './components/Input/input'
 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 { 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'
@@ -31,19 +35,23 @@ declare module 'webcoreui/astro' {
 	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 Icon(_props: IconProps): any
 	export function Input(_props: InputProps): 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 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

package/astro.js

@@ -5,19 +5,23 @@ import BadgeComponent from './components/Badge/Badge.astro'
 import ButtonComponent from './components/Button/Button.astro'
 import CardComponent from './components/Card/Card.astro'
 import CheckboxComponent from './components/Checkbox/Checkbox.astro'
+import CollapsibleComponent from './components/Collapsible/Collapsible.astro'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
 import IconComponent from './components/Icon/Icon.astro'
 import InputComponent from './components/Input/Input.astro'
 import MenuComponent from './components/Menu/Menu.astro'
 import ModalComponent from './components/Modal/Modal.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 SheetComponent from './components/Sheet/Sheet.astro'
 import SliderComponent from './components/Slider/Slider.astro'
 import SpinnerComponent from './components/Spinner/Spinner.astro'
 import SwitchComponent from './components/Switch/Switch.astro'
 import TableComponent from './components/Table/Table.astro'
 import TabsComponent from './components/Tabs/Tabs.astro'
+import TextareaComponent from './components/Textarea/Textarea.astro'
 import ThemeSwitcherComponent from './components/ThemeSwitcher/ThemeSwitcher.astro'
 import TimelineComponent from './components/Timeline/Timeline.astro'
 import TimelineItemComponent from './components/TimelineItem/TimelineItem.astro'
@@ -30,19 +34,23 @@ export const Badge = BadgeComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
 export const Checkbox = CheckboxComponent
+export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
 export const Input = InputComponent
 export const Menu = MenuComponent
 export const Modal = ModalComponent
+export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
+export const Sheet = SheetComponent
 export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent
 export const Tabs = TabsComponent
+export const Textarea = TextareaComponent
 export const ThemeSwitcher = ThemeSwitcherComponent
 export const Timeline = TimelineComponent
 export const TimelineItem = TimelineItemComponent

package/components/Alert/Alert.tsx

@@ -38,7 +38,10 @@ const Alert = ({
     return (
         <Element className={classes} {...rest}>
             {icon && icon}
-            {!icon && theme && <div dangerouslySetInnerHTML={{ __html: iconMap[theme] }} />}
+            {!icon && theme && <div
+                dangerouslySetInnerHTML={{ __html: iconMap[theme] }}
+                style={{ height: '20px' }}
+            />}
 
             <ConditionalWrapper condition={!!(icon || theme)} wrapper={children => (
                 <div className={styles.wrapper}>

package/components/Avatar/avatar.module.scss

@@ -7,6 +7,8 @@ body {
 .avatar {
     @include border-radius(max);
 
+    object-fit: cover;
+
     &:not(.borderless) {
         border: 3px solid var(--w-avatar-border);
     }

package/components/Collapsible/Collapsible.astro

@@ -0,0 +1,63 @@
+---
+import type { CollapsibleProps } from './collapsible'
+
+import styles from './collapsible.module.scss'
+import { classNames } from '../../utils/classNames'
+
+interface Props extends CollapsibleProps {}
+
+const {
+    initialHeight,
+    maxHeight,
+    toggled,
+    className,
+    togglesClassName
+} = Astro.props
+
+const classes = [
+    styles.collapsible,
+    maxHeight && styles.animated,
+    className
+]
+
+const styleVariables = classNames([
+    initialHeight && `--w-collapsible-initial-height: ${initialHeight};`,
+    maxHeight && `--w-collapsible-max-height: ${maxHeight};`
+])
+---
+
+<div
+    class:list={classes}
+    data-toggled={toggled ? 'true' : undefined}
+    data-id="w-collapsible"
+>
+    <div
+        class={styles.wrapper}
+        style={styleVariables}
+    >
+        <slot />
+    </div>
+    <div class:list={togglesClassName}>
+        <div data-toggle-on="true"><slot name="on" /></div>
+        <div data-toggle-off="true"><slot name="off" /></div>
+    </div>
+</div>
+
+<script>
+    const collapsibles = document.querySelectorAll('[data-id="w-collapsible"]')
+
+    Array.from(collapsibles).forEach(element => {
+        element.addEventListener('click', event => {
+            const collapsible = event.currentTarget as HTMLDivElement
+            const target = event.target as HTMLDivElement
+
+            if (target.parentElement?.dataset.toggleOn) {
+                collapsible.dataset.toggled = 'true'
+            }
+
+            if (target.parentElement?.dataset.toggleOff) {
+                collapsible.dataset.toggled = 'false'
+            }
+        })
+    })
+</script>

package/components/Collapsible/Collapsible.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import type { CollapsibleProps } from './collapsible'
+
+    import styles from './collapsible.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let initialHeight: CollapsibleProps['initialHeight'] = ''
+    export let maxHeight: CollapsibleProps['maxHeight'] = ''
+    export let toggled: CollapsibleProps['toggled'] = false
+    export let className: CollapsibleProps['className'] = ''
+    export let togglesClassName: CollapsibleProps['togglesClassName'] = ''
+
+    const classes = classNames([
+        styles.collapsible,
+        maxHeight && styles.animated,
+        className
+    ])
+
+    const styleVariables = classNames([
+        initialHeight && `--w-collapsible-initial-height: ${initialHeight};`,
+        maxHeight && `--w-collapsible-max-height: ${maxHeight};`
+    ])
+</script>
+
+<div
+    class={classes}
+    data-toggled={toggled ? 'true' : undefined}
+>
+    <div
+        class={styles.wrapper}
+        style={styleVariables}
+    >
+        <slot />
+    </div>
+    <div
+        on:click={() => toggled = !toggled}
+        on:keyup={() => toggled = !toggled}
+        role="button"
+        tabindex={0}
+        class={togglesClassName}
+    >
+        {#if toggled}
+            <slot name="off" />
+        {:else}
+            <slot name="on" />
+        {/if}
+    </div>
+</div>

package/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import type { ReactCollapsibleProps } from './collapsible'
+
+import styles from './collapsible.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Collapsible = ({
+    initialHeight,
+    maxHeight,
+    toggled,
+    on,
+    off,
+    children,
+    className,
+    togglesClassName
+}: ReactCollapsibleProps) => {
+    const [toggle, setToggled] = useState(toggled)
+
+    const classes = classNames([
+        styles.collapsible,
+        maxHeight && styles.animated,
+        className
+    ])
+
+    const styleVariables = {
+        ...(initialHeight && { '--w-collapsible-initial-height': initialHeight }),
+        ...(maxHeight && { '--w-collapsible-max-height': maxHeight })
+    } as React.CSSProperties
+
+    return (
+        <div
+            className={classes}
+            data-toggled={toggle ? 'true' : undefined}
+        >
+            <div
+                className={styles.wrapper}
+                style={styleVariables}
+            >
+                {children}
+            </div>
+            <div
+                onClick={() => setToggled(!toggle)}
+                onKeyUp={() => setToggled(!toggle)}
+                role="button"
+                tabIndex={0}
+                className={togglesClassName}
+            >
+                {toggle ? off : on}
+            </div>
+        </div>
+    )
+}
+
+export default Collapsible

package/components/Collapsible/collapsible.module.scss

@@ -0,0 +1,29 @@
+@import '../../scss/config.scss';
+
+body {
+    --w-collapsible-initial-height: 0;
+    --w-collapsible-max-height: 100%;
+}
+
+.collapsible {
+    @include layout(flex, column, xs);
+
+    &:not([data-toggled="true"]) [data-toggle-off],
+    &[data-toggled="true"] [data-toggle-on] {
+        @include visibility(none);
+    }
+
+    &[data-toggled="true"] .wrapper {
+        max-height: var(--w-collapsible-max-height);
+    }
+
+    &.animated .wrapper {
+        @include transition(max-height, .5s);
+    }
+
+    .wrapper {
+        @include visibility(hidden);
+
+        max-height: var(--w-collapsible-initial-height);
+    }
+}

package/components/Collapsible/collapsible.ts

@@ -0,0 +1,14 @@
+export type CollapsibleProps = {
+    initialHeight?: string
+    maxHeight?: string
+    toggled?: boolean
+    className?: string
+    togglesClassName?: string
+}
+
+export type ReactCollapsibleProps = {
+    on: React.ReactNode
+    off: React.ReactNode
+    children?: React.ReactNode
+} & CollapsibleProps
+

package/components/Modal/modal.module.scss

@@ -3,7 +3,7 @@
 .modal {
     @include transition();
     @include position(fixed, 't50%', 'l50%');
-    @include spacing(0, p-default);
+    @include spacing(m0, p-default);
     @include layer(modal);
     @include visibility(block, 0);
     @include border(primary-50);

package/components/Popover/Popover.astro

@@ -0,0 +1,23 @@
+---
+import type { PopoverProps } from './popover'
+import styles from './popover.module.scss'
+
+interface Props extends PopoverProps {}
+
+const {
+    id,
+    className
+} = Astro.props
+
+const classes = [
+    styles.popover,
+    className
+]
+---
+
+<dialog
+    class:list={classes}
+    id={id}
+>
+    <slot />
+</dialog>

package/components/Popover/Popover.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type { PopoverProps } from './popover'
+
+    import styles from './popover.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let id: PopoverProps['id'] = ''
+    export let className: PopoverProps['className'] = ''
+
+    const classes = classNames([
+        styles.popover,
+        className
+    ])
+</script>
+
+<dialog
+    class={classes}
+    id={id}
+>
+    <slot />
+</dialog>

package/components/Popover/Popover.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import type { ReactPopoverProps } from './popover'
+
+import styles from './popover.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Popover = ({
+    id,
+    className,
+    children
+}: ReactPopoverProps) => {
+    const classes = classNames([
+        styles.popover,
+        className
+    ])
+
+    return (
+        <dialog
+            className={classes}
+            id={id}
+        >
+            {children}
+        </dialog>
+    )
+}
+
+export default Popover

package/components/Popover/popover.module.scss

@@ -0,0 +1,51 @@
+@import '../../scss/config.scss';
+
+.popover {
+    @include spacing(m0, p-default);
+    @include layer(modal);
+    @include visibility(block, 0);
+    @include border(primary-50);
+    @include background(primary-70);
+    @include typography(primary);
+    @include border-radius(md);
+    @include size(w300px);
+
+    transform: translateY(-5px);
+    pointer-events: none;
+
+    &[data-show] {
+        @include transition();
+    }
+
+    &[data-show="true"] {
+        @include visibility(1);
+
+        transform: translateY(0);
+        pointer-events: all;
+    }
+
+    &[data-position="top"] {
+        transform: translateY(5px);
+
+        &[data-show="true"] {
+            transform: translate(0);
+        }
+    }
+
+    &[data-position="left"] {
+        transform: translateY(0) translateX(5px);
+
+        &[data-show="true"] {
+            transform: translate(0);
+        }
+    }
+
+
+    &[data-position="right"] {
+        transform: translateY(0) translateX(-5px);
+
+        &[data-show="true"] {
+            transform: translate(0);
+        }
+    }
+}

package/components/Popover/popover.ts

@@ -0,0 +1,8 @@
+export type PopoverProps = {
+    id?: string
+    className?: string
+}
+
+export type ReactPopoverProps = {
+    children?: React.ReactNode
+} & PopoverProps

package/components/Sheet/Sheet.astro

@@ -0,0 +1,29 @@
+---
+import type { SheetProps } from './sheet'
+
+import Modal from '../Modal/Modal.astro'
+
+import styles from './sheet.module.scss'
+import { classNames } from '../../utils/classNames'
+
+interface Props extends SheetProps {}
+
+const {
+    position,
+    className,
+    ...rest
+} = Astro.props
+
+const classes = classNames([
+    styles.sheet,
+    position && styles[position],
+    className
+])
+---
+
+<Modal
+    className={classes}
+    {...rest}
+>
+    <slot />
+</Modal>

package/components/Sheet/Sheet.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { SheetProps } from './sheet'
+
+    import Modal from '../Modal/Modal.svelte'
+
+    import styles from './sheet.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let position: SheetProps['position'] = null
+    export let className: SheetProps['className'] = ''
+
+    const classes = classNames([
+        styles.sheet,
+        position && styles[position],
+        className
+    ])
+</script>
+
+<Modal
+    className={classes}
+    {...$$restProps}
+>
+    <slot />
+</Modal>

package/components/Sheet/Sheet.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import type { ReactSheetProps } from './sheet'
+
+import Modal from '../Modal/Modal.tsx'
+
+import styles from './sheet.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Sheet = ({
+    position,
+    className,
+    children,
+    ...rest
+}: ReactSheetProps) => {
+    const classes = classNames([
+        styles.sheet,
+        position && styles[position],
+        className
+    ])
+
+    return (
+        <Modal
+            className={classes}
+            {...rest}
+        >
+            {children}
+        </Modal>
+
+    )
+}
+
+export default Sheet

package/components/Sheet/sheet.module.scss

@@ -0,0 +1,68 @@
+@import '../../scss/config.scss';
+
+.sheet {
+    @include position(t0, 'r-100%', lauto);
+    @include visibility(1);
+    @include border-radius(none);
+    @include size(100%);
+    @include border(0);
+    @include border(left, primary-50);
+
+    transform: none;
+
+    &[data-show="true"] {
+        @include position(r0);
+
+        transform: none;
+    }
+
+    &.left {
+        @include position('l-100%', rauto);
+        @include border(0);
+        @include border(right, primary-50);
+
+        &[data-show="true"] {
+            @include position(l0);
+        }
+    }
+
+    &.top {
+        @include position(t0, l0);
+        @include size(hauto);
+        @include border(0);
+        @include border(bottom, primary-50);
+
+        transform: translateY(-100%);
+        min-width: 100%;
+
+        &[data-show="true"] {
+            transform: translateY(0);
+        }
+    }
+
+    &.bottom {
+        @include position(b0, l0);
+        @include size(hauto);
+        @include border(0);
+        @include border(top, primary-50);
+
+        transform: translateY(100%);
+        top: auto;
+        min-width: 100%;
+
+        &[data-show="true"] {
+            transform: translateY(0);
+        }
+    }
+}
+
+@include media(xs) {
+    .sheet {
+        @include position(r-500px);
+        @include size(w500px);
+
+        &.left {
+            @include position(l-500px);
+        }
+    }
+}