webcoreui 0.4.1 → 0.5.0

package/components/Select/Select.tsx

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

package/components/Select/select.ts

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

package/components/Table/Table.svelte

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

package/components/Table/table.ts

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

package/icons/arrow-left.svg

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

package/icons/arrow-right.svg

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

package/icons/order.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.8125 20V4M5.8125 4L10.625 9.09091M5.8125 4L1 9.09091M18.1875 4V20M18.1875 20L23 14.9091M18.1875 20L13.375 14.9091" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons.d.ts

@@ -1,12 +1,15 @@
 declare module 'webcoreui/icons' {
     export const alert: string
 	export const arrowDown: string
+	export const arrowLeft: string
+	export const arrowRight: string
 	export const check: string
 	export const circleCheck: string
 	export const close: string
 	export const github: string
 	export const info: string
 	export const moon: string
+	export const order: string
 	export const search: string
 	export const sun: string
 	export const warning: string

package/icons.js

@@ -1,11 +1,14 @@
 export { default as alert } from './icons/alert.svg?raw'
 export { default as arrowDown } from './icons/arrow-down.svg?raw'
+export { default as arrowLeft } from './icons/arrow-left.svg?raw'
+export { default as arrowRight } from './icons/arrow-right.svg?raw'
 export { default as check } from './icons/check.svg?raw'
 export { default as circleCheck } from './icons/circle-check.svg?raw'
 export { default as close } from './icons/close.svg?raw'
 export { default as github } from './icons/github.svg?raw'
 export { default as info } from './icons/info.svg?raw'
 export { default as moon } from './icons/moon.svg?raw'
+export { default as order } from './icons/order.svg?raw'
 export { default as search } from './icons/search.svg?raw'
 export { default as sun } from './icons/sun.svg?raw'
 export { default as warning } from './icons/warning.svg?raw'

package/index.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.4.1",
+    "version": "0.5.0",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",

package/react.d.ts

@@ -5,15 +5,18 @@ import type { AvatarProps } from './components/Avatar/avatar'
 import type { ReactBadgeProps } from './components/Badge/badge'
 import type { ReactButtonProps } from './components/Button/button'
 import type { ReactCardProps } from './components/Card/card'
+import type { ReactCarouselProps } from './components/Carousel/carousel'
 import type { ReactCheckboxProps } from './components/Checkbox/checkbox'
 import type { ReactCollapsibleProps } from './components/Collapsible/collapsible'
 import type { ReactConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { ReactDataTableProps } from './components/DataTable/datatable'
 import type { ReactGroupProps } from './components/Group/group'
 import type { IconProps } from './components/Icon/icon'
 import type { ReactInputProps } from './components/Input/input'
 import type { ReactListProps } from './components/List/list'
 import type { ReactMenuProps } from './components/Menu/menu'
 import type { ReactModalProps } from './components/Modal/modal'
+import type { ReactPaginationProps } from './components/Pagination/pagination'
 import type { ReactPopoverProps } from './components/Popover/popover'
 import type { ProgressProps } from './components/Progress/progress'
 import type { ReactRadioProps } from './components/Radio/radio'
@@ -38,15 +41,18 @@ declare module 'webcoreui/react' {
 	export const Badge: FC<ReactBadgeProps>
 	export const Button: FC<ReactButtonProps>
 	export const Card: FC<ReactCardProps>
+	export const Carousel: FC<ReactCarouselProps>
 	export const Checkbox: FC<ReactCheckboxProps>
 	export const Collapsible: FC<ReactCollapsibleProps>
 	export const ConditionalWrapper: FC<ReactConditionalWrapperProps>
+	export const DataTable: FC<ReactDataTableProps>
 	export const Group: FC<ReactGroupProps>
 	export const Icon: FC<IconProps>
 	export const Input: FC<ReactInputProps>
 	export const List: FC<ReactListProps>
 	export const Menu: FC<ReactMenuProps>
 	export const Modal: FC<ReactModalProps>
+	export const Pagination: FC<ReactPaginationProps>
 	export const Popover: FC<ReactPopoverProps>
 	export const Progress: FC<ProgressProps>
 	export const Radio: FC<ReactRadioProps>

package/react.js

@@ -4,15 +4,18 @@ import AvatarComponent from './components/Avatar/Avatar.tsx'
 import BadgeComponent from './components/Badge/Badge.tsx'
 import ButtonComponent from './components/Button/Button.tsx'
 import CardComponent from './components/Card/Card.tsx'
+import CarouselComponent from './components/Carousel/Carousel.tsx'
 import CheckboxComponent from './components/Checkbox/Checkbox.tsx'
 import CollapsibleComponent from './components/Collapsible/Collapsible.tsx'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.tsx'
+import DataTableComponent from './components/DataTable/DataTable.tsx'
 import GroupComponent from './components/Group/Group.tsx'
 import IconComponent from './components/Icon/Icon.tsx'
 import InputComponent from './components/Input/Input.tsx'
 import ListComponent from './components/List/List.tsx'
 import MenuComponent from './components/Menu/Menu.tsx'
 import ModalComponent from './components/Modal/Modal.tsx'
+import PaginationComponent from './components/Pagination/Pagination.tsx'
 import PopoverComponent from './components/Popover/Popover.tsx'
 import ProgressComponent from './components/Progress/Progress.tsx'
 import RadioComponent from './components/Radio/Radio.tsx'
@@ -36,15 +39,18 @@ export const Avatar = AvatarComponent
 export const Badge = BadgeComponent
 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 Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent
 export const List = ListComponent
 export const Menu = MenuComponent
 export const Modal = ModalComponent
+export const Pagination = PaginationComponent
 export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent

package/scss/resets.scss

@@ -57,7 +57,7 @@
     }
 
     code {
-        @include spacing(px-sm);
+        @include spacing(px-xs);
         display: inline-block;
     }
 
@@ -103,4 +103,30 @@
         @include border(0);
         @include background(primary-50);
     }
+
+    table {
+        @include size('w100%');
+        @include typography(left);
+
+        border-collapse: collapse;
+    }
+
+    thead,
+    tfoot {
+        @include typography(bold);
+    }
+
+    th,
+    td {
+        @include spacing(py-xs, px-sm);
+    }
+
+    thead,
+    tr {
+        @include border(bottom, primary-50);
+
+        &:last-child {
+            @include border(bottom, 0);
+        }
+    }
 }    

package/svelte.d.ts

@@ -4,15 +4,18 @@ import type { AvatarProps } from './components/Avatar/avatar'
 import type { SvelteBadgeProps } from './components/Badge/badge'
 import type { SvelteButtonProps } from './components/Button/button'
 import type { CardProps } from './components/Card/card'
+import type { SvelteCarouselProps } from './components/Carousel/carousel'
 import type { SvelteCheckboxProps } from './components/Checkbox/checkbox'
 import type { CollapsibleProps } from './components/Collapsible/collapsible'
 import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { SvelteDataTableProps } from './components/DataTable/datatable'
 import type { GroupProps } from './components/Group/group'
 import type { IconProps } from './components/Icon/icon'
 import type { SvelteInputProps } from './components/Input/input'
 import type { SvelteListProps } from './components/List/list'
 import type { MenuProps } from './components/Menu/menu'
 import type { ModalProps } from './components/Modal/modal'
+import type { SveltePaginationProps } from './components/Pagination/pagination'
 import type { PopoverProps } from './components/Popover/popover'
 import type { ProgressProps } from './components/Progress/progress'
 import type { SvelteRadioProps } from './components/Radio/radio'
@@ -37,15 +40,18 @@ declare module 'webcoreui/svelte' {
 	export function Badge(_props: SvelteBadgeProps): any
 	export function Button(_props: SvelteButtonProps): any
 	export function Card(_props: CardProps): any
+	export function Carousel(_props: SvelteCarouselProps): any
 	export function Checkbox(_props: SvelteCheckboxProps): any
 	export function Collapsible(_props: CollapsibleProps): any
 	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
+	export function DataTable(_props: SvelteDataTableProps): any
 	export function Group(_props: GroupProps): any
 	export function Icon(_props: IconProps): any
 	export function Input(_props: SvelteInputProps): any
 	export function List(_props: SvelteListProps): any
 	export function Menu(_props: MenuProps): any
 	export function Modal(_props: ModalProps): any
+	export function Pagination(_props: SveltePaginationProps): any
 	export function Popover(_props: PopoverProps): any
 	export function Progress(_props: ProgressProps): any
 	export function Radio(_props: SvelteRadioProps): any

package/svelte.js

@@ -4,15 +4,18 @@ import AvatarComponent from './components/Avatar/Avatar.svelte'
 import BadgeComponent from './components/Badge/Badge.svelte'
 import ButtonComponent from './components/Button/Button.svelte'
 import CardComponent from './components/Card/Card.svelte'
+import CarouselComponent from './components/Carousel/Carousel.svelte'
 import CheckboxComponent from './components/Checkbox/Checkbox.svelte'
 import CollapsibleComponent from './components/Collapsible/Collapsible.svelte'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.svelte'
+import DataTableComponent from './components/DataTable/DataTable.svelte'
 import GroupComponent from './components/Group/Group.svelte'
 import IconComponent from './components/Icon/Icon.svelte'
 import InputComponent from './components/Input/Input.svelte'
 import ListComponent from './components/List/List.svelte'
 import MenuComponent from './components/Menu/Menu.svelte'
 import ModalComponent from './components/Modal/Modal.svelte'
+import PaginationComponent from './components/Pagination/Pagination.svelte'
 import PopoverComponent from './components/Popover/Popover.svelte'
 import ProgressComponent from './components/Progress/Progress.svelte'
 import RadioComponent from './components/Radio/Radio.svelte'
@@ -36,15 +39,18 @@ export const Avatar = AvatarComponent
 export const Badge = BadgeComponent
 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 Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent
 export const List = ListComponent
 export const Menu = MenuComponent
 export const Modal = ModalComponent
+export const Pagination = PaginationComponent
 export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent