webcoreui 0.2.0 → 0.4.0

package/README.md

@@ -79,7 +79,7 @@ yarn add webcoreui
 
 ### Setup
 
-Create an empty `webcore.config.scss` file at the root of your project to setup CSS configurations. Setup default styles and fonts by calling the following in your global SCSS file:
+Create an empty [`webcore.config.scss`](https://webcoreui.dev/docs/css-configuration#webcoreconfigscss) file at the root of your project to setup CSS configurations. Setup default styles and fonts by calling the following in your global SCSS file:
 
 ```scss
 @import 'webcoreui/styles';
@@ -113,6 +113,10 @@ html body {
     // Checkbox component
     --w-checkbox-color: var(--w-color-primary);
 
+    // Collapsible component
+    --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,26 @@ 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)
+- [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)
+- [List](https://github.com/Frontendland/webcoreui/tree/main/src/components/List)
 - [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)
+- [Select](https://github.com/Frontendland/webcoreui/tree/main/src/components/Select)
+- [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,24 +5,31 @@ 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'
-    
+
 declare module 'webcoreui/astro' {
     export function Accordion(_props: AccordionProps): any
 	export function Alert(_props: AlertProps): any
@@ -31,19 +38,26 @@ 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 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

package/astro.js

@@ -5,19 +5,26 @@ 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 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 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 SelectComponent from './components/Select/Select.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 +37,26 @@ 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 Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent
+export const List = ListComponent
 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 Select = SelectComponent
+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/Accordion/Accordion.astro

@@ -1,6 +1,8 @@
 ---
 import type { AccordionProps } from './accordion'
+
 import ArrowDown from '../../icons/arrow-down.svg?raw'
+
 import styles from './accordion.module.scss'
 
 interface Props extends AccordionProps {}

package/components/Accordion/Accordion.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import type { AccordionProps } from './accordion'
+
     import ArrowDown from '../../icons/arrow-down.svg?raw'
+
     import styles from './accordion.module.scss'
 
     export let items: AccordionProps['items']

package/components/Accordion/Accordion.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react'
 import type { AccordionProps } from './accordion'
+
 import ArrowDown from '../../icons/arrow-down.svg?raw'
+
 import styles from './accordion.module.scss'
 
 const Accordion = ({ items }: AccordionProps) => {

package/components/Alert/Alert.astro

@@ -1,11 +1,12 @@
 ---
 import type { AlertProps } from './alert'
+
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
-import info from '../../icons/info.svg?raw'
+import alert from '../../icons/alert.svg?raw'
 import success from '../../icons/circle-check.svg?raw'
+import info from '../../icons/info.svg?raw'
 import warning from '../../icons/warning.svg?raw'
-import alert from '../../icons/alert.svg?raw'
 
 import styles from './alert.module.scss'
 

package/components/Alert/Alert.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
     import type { AlertProps } from './alert'
+
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
-    import info from '../../icons/info.svg?raw'
+    import alert from '../../icons/alert.svg?raw'
     import success from '../../icons/circle-check.svg?raw'
+    import info from '../../icons/info.svg?raw'
     import warning from '../../icons/warning.svg?raw'
-    import alert from '../../icons/alert.svg?raw'
 
     import styles from './alert.module.scss'
 
@@ -40,7 +41,7 @@
     {#if !hasCustomIcon && theme}
         {@html iconMap[theme]}
     {/if}
-    
+
     <ConditionalWrapper
         condition={!!(hasCustomIcon || theme)}
         element="div"

package/components/Alert/Alert.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import type { ReactAlertProps } from './alert'
+
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
-import info from '../../icons/info.svg?raw'
+import alert from '../../icons/alert.svg?raw'
 import success from '../../icons/circle-check.svg?raw'
+import info from '../../icons/info.svg?raw'
 import warning from '../../icons/warning.svg?raw'
-import alert from '../../icons/alert.svg?raw'
 
 import styles from './alert.module.scss'
 
@@ -38,7 +39,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.astro

@@ -1,5 +1,6 @@
 ---
 import type { AvatarProps } from './avatar'
+
 import styles from './avatar.module.scss'
 
 interface Props extends AvatarProps {}
@@ -12,7 +13,7 @@ const {
     borderColor,
     borderless,
     reverse,
-    className,
+    className
 } = Astro.props
 
 const classes = [

package/components/Avatar/Avatar.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { AvatarProps } from './avatar'
 
-    import styles from './avatar.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './avatar.module.scss'
+
     export let img: AvatarProps['img'] = ''
     export let alt: AvatarProps['alt'] = 'Avatar'
     export let size: AvatarProps['size'] = 40

package/components/Avatar/Avatar.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import type { AvatarProps } from './avatar'
 
-import styles from './avatar.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './avatar.module.scss'
+
 const Avatar = ({
     img,
     alt = 'Avatar',
@@ -12,7 +13,7 @@ const Avatar = ({
     borderColor,
     borderless,
     reverse,
-    className,
+    className
 }: AvatarProps) => {
     const classes = classNames([
         styles.avatar,
@@ -60,7 +61,6 @@ const Avatar = ({
             style={borderColorStyle}
         />
     )
-    
 }
 
 export default Avatar

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/Badge/Badge.astro

@@ -1,5 +1,6 @@
 ---
 import type { BadgeProps } from './badge'
+
 import styles from './badge.module.scss'
 
 interface Props extends BadgeProps {}

package/components/Badge/Badge.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { SvelteBadgeProps } from './badge'
 
-    import styles from './badge.module.scss'
     import { classNames } from '../../utils/classNames'
-    
+
+    import styles from './badge.module.scss'
+
     export let theme: SvelteBadgeProps['theme'] = null
     export let onClick: SvelteBadgeProps['onClick'] = null
     export let hover: SvelteBadgeProps['hover'] = false

package/components/Badge/Badge.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import type { ReactBadgeProps } from './badge'
 
-import styles from './badge.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './badge.module.scss'
+
 const Badge = ({
     theme,
     onClick,

package/components/Button/Button.astro

@@ -2,7 +2,6 @@
 import type { ButtonProps } from './button'
 
 import styles from './button.module.scss'
-import { classNames } from '../../utils/classNames'
 
 interface Props extends ButtonProps {}
 
@@ -13,19 +12,19 @@ const {
     ...rest
 } = Astro.props
 
-const classes = classNames([
+const classes = [
     styles.button,
     theme && styles[theme],
     className
-])
+]
 ---
 
 {href ? (
-    <a {...rest} href={href} class={classes || null}>
+    <a {...rest} href={href} class:list={classes}>
         <slot />
     </a>
 ) : (
-    <button {...rest} class={classes || null}>
+    <button {...rest} class:list={classes}>
         <slot />
     </button>
 )}

package/components/Button/Button.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { SvelteButtonProps } from './button'
 
-    import styles from './button.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './button.module.scss'
+
     export let theme: SvelteButtonProps['theme'] = null
     export let href: SvelteButtonProps['href'] = ''
     export let className: SvelteButtonProps['className'] = ''

package/components/Button/Button.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import type { ReactButtonProps } from './button'
 
-import styles from './button.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './button.module.scss'
+
 const Button = ({
     theme,
     href,

package/components/Button/button.ts

@@ -18,5 +18,5 @@ export type SvelteButtonProps = {
 
 export type ReactButtonProps = {
     onClick?: () => any
-    children?: React.ReactNode
+    children: React.ReactNode
 } & ButtonProps

package/components/Card/Card.astro

@@ -1,5 +1,6 @@
 ---
 import type { CardProps } from './card'
+
 import styles from './card.module.scss'
 
 interface Props extends CardProps {}
@@ -10,6 +11,7 @@ const {
     titleTag = 'span',
     compact,
     className,
+    bodyClassName,
     secondary,
     ...rest
 } = Astro.props
@@ -17,8 +19,14 @@ const {
 const classes = [
     styles.card,
     secondary && styles.secondary,
-    className,
-].filter(Boolean).join(' ')
+    className
+]
+
+const bodyClasses = [
+    styles.body,
+    compact && styles.compact,
+    bodyClassName
+]
 
 const Component = element
 const Title = titleTag
@@ -28,7 +36,7 @@ const Title = titleTag
     {title && (
         <Title class:list={styles.title}>{title}</Title>
     )}
-    <div class:list={[styles.body, compact && styles.compact]}>
+    <div class:list={bodyClasses}>
         <slot />
     </div>
 </Component>

package/components/Card/Card.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
     import type { CardProps } from './card'
 
-    import styles from './card.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './card.module.scss'
+
     export let element: CardProps['element'] = 'section'
     export let title: CardProps['title'] = ''
     export let titleTag: CardProps['titleTag'] = 'span'
     export let compact: CardProps['compact'] = false
     export let className: CardProps['className'] = ''
+    export let bodyClassName: CardProps['bodyClassName'] = ''
     export let secondary: CardProps['secondary'] = false
 
     const classes = classNames([
@@ -19,7 +21,8 @@
 
     const bodyClasses = classNames([
         styles.body,
-        compact && styles.compact
+        compact && styles.compact,
+        bodyClassName
     ])
 </script>
 

package/components/Card/Card.tsx

@@ -1,15 +1,17 @@
 import React from 'react'
 import type { ReactCardProps } from './card'
 
-import styles from './card.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './card.module.scss'
+
 const Card = ({
     Element = 'section',
     title,
     TitleTag = 'span',
     compact,
     className,
+    bodyClassName,
     secondary,
     children,
     ...rest
@@ -22,7 +24,8 @@ const Card = ({
 
     const bodyClasses = classNames([
         styles.body,
-        compact && styles.compact
+        compact && styles.compact,
+        bodyClassName
     ])
 
     return (

package/components/Card/card.ts

@@ -4,6 +4,7 @@ export type CardProps = {
     titleTag?: string
     compact?: boolean
     className?: string
+    bodyClassName?: string
     secondary?: boolean
     [key: string]: any
 }

package/components/Checkbox/Checkbox.astro

@@ -1,5 +1,6 @@
 ---
 import type { CheckboxProps } from './checkbox'
+
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
 import check from '../../icons/check.svg?raw'

package/components/Checkbox/Checkbox.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
     import type { SvelteCheckboxProps } from './checkbox'
+
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
-    
+
+    import { classNames } from '../../utils/classNames'
+
     import check from '../../icons/check.svg?raw'
-    
+
     import styles from './checkbox.module.scss'
-    import { classNames } from '../../utils/classNames'
-    
+
     export let checked: SvelteCheckboxProps['checked'] = false
     export let label: SvelteCheckboxProps['label'] = ''
     export let subText: SvelteCheckboxProps['subText'] = ''
@@ -20,7 +22,7 @@
         label && subText && styles.col,
         className
     ])
-    
+
     const style = color
         ? `--w-checkbox-color: ${color};`
         : null

package/components/Checkbox/Checkbox.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import type { ReactCheckboxProps } from './checkbox'
+
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
+import { classNames } from '../../utils/classNames'
+
 import check from '../../icons/check.svg?raw'
 
 import styles from './checkbox.module.scss'
-import { classNames } from '../../utils/classNames'
 
 const Checkbox = ({
     checked,
@@ -21,7 +23,7 @@ const Checkbox = ({
         label && subText && styles.col,
         className
     ])
-    
+
     const style = color
         ? { '--w-checkbox-color': color } as React.CSSProperties
         : undefined