webcoreui 0.1.0 → 0.3.0

package/scss/global/utility.scss

@@ -1,88 +1,106 @@
+@use 'sass:string';
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:map';
 @use '../config' as *;
 
+$breakpointMap: (
+    'xs': 3,
+    'sm': 4,
+    'md': 6,
+    'lg': 8
+);
+
+$alignments: (
+    'items-center': center,
+    'items-start': flex-start,
+    'items-end': flex-end,
+    'items-baseline': baseline,
+    'items-stretch': stretch,
+
+    'justify-center': center,
+    'justify-start': flex-start,
+    'justify-end': flex-end,
+    'justify-between': space-between,
+    'justify-around': space-around,
+    'justify-evenly': space-evenly,
+    'justify-stretch': stretch  
+);
+
 @mixin utility() {
     .container {
-        margin: 0 auto;
+        @include spacing(auto-none, px-default);
         max-width: 1200px;
-        padding: 0 20px;
     }
 
-    .grid {
-        display: grid;
-        gap: 20px;
-
-        &.col-2 {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
+    // Gaps
+    .flex, .grid {
+        @each $key, $value in $spacing {
+            $numberList: ('2', '3', '4', '5');
+            $firstLetter: string.slice($key, 1, 1);
+            $class: $key;
+            
+            @if (list.index($numberList, $firstLetter)) {
+              $class: string.slice($key, 2, -1) + $firstLetter;
+            }
+
+            &.#{$class} { gap: $value; }        
         }
     }
 
-    .flex {
-        display: flex;
-        gap: 20px;
-
-        &.column {
-            flex-direction: column;
-        }
-
-        &.xs {
-            gap: 5px;
-        }
-
-        &.sm {
-            gap: 10px;
-        }
-
-        &.wrap {
-            flex-wrap: wrap;
-        }
-
-        &.center {
-            justify-content: center;
-            align-items: center;
-        }
-
-        &.justify-center {
-            justify-content: center;
-        }
-
-        &.items-center {
-            align-items: center;
-        }
-
-        &.items-start {
-            align-items: flex-start;
+    // Alignments
+    @each $key, $value in $alignments {
+        .#{$key} {
+            @if (string.index($key, 'items')) {
+                align-items: $value;
+            } @else {
+                justify-content: $value;
+            } 
         }
     }
 
-    .my {
-        margin: 20px auto;
+    .flex.center,
+    .grid.center {
+        justify-content: center;
+        align-items: center;
     }
 
-    @include media('md') {
-        .grid.md-2 {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
+    .flex {
+        @include layout(flex, default);
 
-        .grid.md-3 {
-            grid-template-columns: repeat(3, minmax(0, 1fr));
+        @each $direction in $flexDirectionValues {
+            &.#{$direction} {
+                flex-direction: $direction;
+            }
         }
 
-        .grid.md-4 {
-            grid-template-columns: repeat(4, minmax(0, 1fr));
+        @each $wrap in $flexWrapValues {
+            &.#{$wrap} {
+                flex-wrap: $wrap;
+            }
         }
     }
 
-    @include media('lg') {
-        .grid.lg-2 {
+    .grid {
+        @include layout(grid, default);
+
+        &.col-2 {
             grid-template-columns: repeat(2, minmax(0, 1fr));
         }
 
-        .grid.lg-3 {
+        &.col-3 {
             grid-template-columns: repeat(3, minmax(0, 1fr));
         }
+    }
 
-        .grid.lg-4 {
-            grid-template-columns: repeat(4, minmax(0, 1fr));
+    // Grid columns
+    @each $key, $value in $breakpoints {
+        @include media($key) {
+            @for $i from 2 to map.get($breakpointMap, $key) + 1 {
+                .grid.#{$key}-#{$i} {
+                    grid-template-columns: repeat($i, minmax(0, 1fr));
+                }
+            }
         }
     }
 }

package/scss/resets.scss

@@ -53,11 +53,11 @@
     pre {
         @include border(primary-50);
         @include border-radius(md);
-        @include typography(sm);
+        @include typography(md);
     }
 
     code {
-        @include spacing(py-xxs, px-sm, my-xxs);
+        @include spacing(px-sm);
         display: inline-block;
     }
 
@@ -73,7 +73,7 @@
     }
 
     figcaption {
-        @include typography(sm, primary-20);  
+        @include typography(md, primary-20);  
         
         a {
             @include typography(primary-20);
@@ -85,7 +85,7 @@
     }
 
     p, ul, ol {
-        @include typography(md, hlg);
+        @include typography(hlg);
         @include spacing(my-default);
     }
 
@@ -94,8 +94,13 @@
     }
 
     blockquote {
-        @include typography(md);
         @include spacing(my-default, mx-none, pl-default);
         @include border(2px, left, primary-30);
     }
+
+    hr {
+        @include size('w100%', h1px);
+        @include border(0);
+        @include background(primary-50);
+    }
 }    

package/scss/setup.scss

@@ -2,7 +2,7 @@
 
 $config: (
     includeResets: true,
-    includeHelperClasses: true,
+    includeUtilities: true,
     includeTooltip: true,
     includeScrollbarStyles: true
 );
@@ -25,7 +25,7 @@ body {
         @include resets();
     }
 
-    @if (config('includeHelperClasses')) {
+    @if (config('includeUtilities')) {
         @include utility();
     }
 

package/svelte.d.ts

@@ -5,17 +5,23 @@ import type { SvelteBadgeProps } from './components/Badge/badge'
 import type { SvelteButtonProps } from './components/Button/button'
 import type { CardProps } from './components/Card/card'
 import type { SvelteCheckboxProps } 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 { SvelteInputProps } 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 { SvelteRadioProps } from './components/Radio/radio'
 import type { RatingProps } from './components/Rating/rating'
+import type { SheetProps } from './components/Sheet/sheet'
+import type { SvelteSliderProps } from './components/Slider/slider'
 import type { SpinnerProps } from './components/Spinner/spinner'
 import type { SvelteSwitchProps } from './components/Switch/switch'
 import type { TableProps } from './components/Table/table'
 import type { TabsProps } from './components/Tabs/tabs'
+import type { SvelteTextareaProps } 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'
@@ -29,17 +35,23 @@ declare module 'webcoreui/svelte' {
 	export function Button(_props: SvelteButtonProps): any
 	export function Card(_props: CardProps): any
 	export function Checkbox(_props: SvelteCheckboxProps): any
+	export function Collapsible(_props: CollapsibleProps): any
 	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
 	export function Icon(_props: IconProps): any
 	export function Input(_props: SvelteInputProps): 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: SvelteRadioProps): any
 	export function Rating(_props: RatingProps): any
+	export function Sheet(_props: SheetProps): any
+	export function Slider(_props: SvelteSliderProps): any
 	export function Spinner(_props: SpinnerProps): any
 	export function Switch(_props: SvelteSwitchProps): any
 	export function Table(_props: TableProps): any
 	export function Tabs(_props: TabsProps): any
+	export function Textarea(_props: SvelteTextareaProps): any
 	export function ThemeSwitcher(_props: ThemeSwitcherProps): any
 	export function Timeline(_props: TimelineProps): any
 	export function TimelineItem(_props: TimelineItemProps): any

package/svelte.js

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

@@ -0,0 +1,24 @@
+export const debounce = (fn: any, waitFor = 100) => {
+    let timeout: ReturnType<typeof setTimeout> | null
+
+    const clear = () => {
+        if (timeout !== null) {
+            clearTimeout(timeout)
+            timeout = null
+        }
+    }
+
+    const debouncedFn = (...args: any[]) => {
+        clear()
+    
+        timeout = setTimeout(() => {
+            fn(...args)
+        }, waitFor)
+    }
+
+    debouncedFn.cancel = () => {
+        clear()
+    }
+
+    return debouncedFn
+}

package/utils/interpolate.ts

@@ -0,0 +1,23 @@
+export const clamp = (
+    num: number,
+    min: number,
+    max: number
+) => Math.min(Math.max(num, min), max)
+    
+export const lerp = (
+    x: number,
+    y: number,
+    z: number
+) => x * (1 - z) + y * z
+        
+export const invlerp = (
+    x: number,
+    y: number,
+    z: number
+) => clamp((z - x) / (y - x), 0, 1)
+    
+export const interpolate = (
+    value: number,
+    input: [x: number, y: number],
+    output: [x: number, y: number],
+) => lerp(output[0], output[1], invlerp(input[0], input[1], value))

package/utils/modal.ts

@@ -0,0 +1,59 @@
+export const modal = (element: string) => {
+    const htmlElement = document.querySelector(element) as HTMLElement
+
+    if (htmlElement) {
+        const handleClose = {
+            icon: () => {
+                const close = htmlElement.querySelector('[data-id="close"]')
+
+                const listener = () => {
+                    htmlElement.dataset.show = ''
+
+                    close?.removeEventListener('click', listener)
+                }
+
+                close?.addEventListener('click', listener)
+            },
+    
+            esc: () => {
+                const listener = (event: KeyboardEvent) => {
+                    if (event.key === 'Escape') {
+                        htmlElement.dataset.show = ''
+
+                        document.removeEventListener('keydown', listener)
+                    }
+                }
+
+                document.addEventListener('keydown', listener)
+            },
+    
+            overlay: () => {
+                const close = htmlElement.nextElementSibling
+
+                const listener = () => {
+                    htmlElement.dataset.show = ''
+
+                    close?.removeEventListener('click', listener)
+                }
+
+                close?.addEventListener('click', listener)
+            }
+        }
+
+        const closeOptions = htmlElement.dataset.close?.split(',')
+
+        htmlElement.dataset.show = 'true'
+
+        closeOptions?.forEach(option => {
+            handleClose[option as keyof typeof handleClose]()
+        })
+    }
+}
+
+export const closeModal = (element: string) => {
+    const htmlElement = document.querySelector(element) as HTMLElement
+
+    if (htmlElement) {
+        htmlElement.dataset.show = ''
+    }
+}

package/utils/popover.ts

@@ -0,0 +1,201 @@
+import { closeModal } from './modal'
+import { debounce } from './debounce'
+
+type PopoverPosition = 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+
+type Popover = {
+    trigger: string
+    popover: string
+    position?: PopoverPosition
+    offset?: number
+    closeOnBlur?: boolean
+}
+
+export const popover = ({
+    trigger,
+    popover,
+    position,
+    offset = 10,
+    closeOnBlur = true
+}: Popover) => {
+    const triggerDOM = document.querySelector(trigger) as HTMLElement
+    const popoverDOM = document.querySelector(popover) as HTMLElement
+
+    if (triggerDOM && popover) {
+        document.body.appendChild(popoverDOM)
+
+        if (position) {
+            popoverDOM.dataset.position = position.split('-')[0]
+        }
+
+        const handleOpen = () => {
+            const triggerPosition = triggerDOM.getBoundingClientRect()
+            const popoverPosition = popoverDOM.getBoundingClientRect()
+
+            const topSide = triggerPosition.top
+                + window.scrollY
+                - popoverPosition.height
+                - offset
+
+            const bottomSide = triggerPosition.top 
+                + window.scrollY
+                + triggerPosition.height
+                + offset
+
+            const leftSide = triggerPosition.left
+                - popoverPosition.width
+                - offset
+
+            const rightSide = triggerPosition.left
+                + triggerPosition.width
+                + offset
+
+            const hcenter = triggerPosition.left
+                - ((popoverPosition.width - triggerPosition.width) / 2)
+
+            const hEnd = triggerPosition.left
+                - (popoverPosition.width - triggerPosition.width)
+
+            const vcenter = triggerPosition.top
+                + window.scrollY
+                - ((popoverPosition.height - triggerPosition.height) / 2)
+
+            const vStart = triggerPosition.top + window.scrollY
+            const vEnd = triggerPosition.top
+                + window.scrollY
+                - (popoverPosition.height - triggerPosition.height)
+
+            const positions = {
+                'top-start': {
+                    top: topSide,
+                    left: triggerPosition.left
+                },
+                'top': {
+                    top: topSide,
+                    left: hcenter
+                },
+                'top-end': {
+                    top: topSide,
+                    left: hEnd
+                },
+                'left-start': {
+                    top: vStart,
+                    left: leftSide
+                },
+                'left': {
+                    top: vcenter,
+                    left: leftSide
+                },
+                'left-end': {
+                    top: vEnd,
+                    left: leftSide
+                },
+                'right-start': {
+                    top: vStart,
+                    left: rightSide
+                },
+                'right': {
+                    top: vcenter,
+                    left: rightSide
+                },
+                'right-end': {
+                    top: vEnd,
+                    left: rightSide
+                },
+                'bottom-start': {
+                    top: bottomSide,
+                    left: triggerPosition.left
+                },
+                'bottom': {
+                    top: bottomSide,
+                    left: hcenter
+                },
+                'bottom-end': {
+                    top: bottomSide,
+                    left: hEnd
+                }
+            }
+
+            const { top, left } = positions[position as keyof typeof positions] || positions.bottom
+    
+            popoverDOM.style.top = `${top}px`
+            popoverDOM.style.left = `${left}px`
+            
+            setTimeout(() => {
+                popoverDOM.dataset.show = popoverDOM.dataset.show === 'true'
+                    ? ''
+                    : 'true'
+            }, 0)
+
+            setTimeout(() => {
+                if (!popoverDOM.dataset.show) {
+                    popoverDOM.removeAttribute('data-show')
+                }
+            }, 300)
+        }
+
+        const handleClose = (event: MouseEvent) => {
+            const target = event.target as HTMLElement
+            const hidePopover = !popoverDOM.contains(target)
+                && !triggerDOM.contains(target)
+                && popoverDOM.dataset.show
+
+            if (hidePopover) {
+                popoverDOM.dataset.show = ''
+            }
+
+            setTimeout(() => {
+                if (!popoverDOM.dataset.show) {
+                    popoverDOM.removeAttribute('data-show')
+                }
+            }, 300)
+        }
+
+        const removeOnResize = debounce(() => {
+            popoverDOM.dataset.show = ''
+
+            setTimeout(() => {
+                if (!popoverDOM.dataset.show) {
+                    popoverDOM.removeAttribute('data-show')
+                }
+            }, 300)
+        })
+
+        const observer = new ResizeObserver(() => {
+            if (popoverDOM.dataset.show) {
+                removeOnResize()
+            }
+        })
+
+        triggerDOM.addEventListener('click', handleOpen)
+        observer.observe(document.body)
+
+        if (closeOnBlur) {
+            document.addEventListener('click', handleClose)
+        }
+
+        return {
+            remove() {
+                triggerDOM.removeEventListener('click', handleOpen);
+                observer.disconnect()
+
+                if (closeOnBlur) {
+                    document.removeEventListener('click', handleClose)
+                }
+            }
+        }
+    }
+}
+
+export const closePopover = closeModal

package/utils/toast.ts

@@ -6,7 +6,6 @@ type Toast = {
     timeout?: number
     title?: AlertProps['title']
     content?: string
-    theme?: AlertProps['theme']
     position?: ToastProps['position']
 }
 
@@ -23,17 +22,12 @@ export const toast = (config: Toast | string) => {
         timeout,
         title,
         content,
-        theme,
         position
     } = (typeof config === 'string' ? {} : config) as Toast
 
     const htmlElement = document.querySelector(element) as HTMLElement
 
     if (htmlElement) {
-        if (theme) {
-            htmlElement.dataset.theme = theme
-        }
-        
         if (position) {
             htmlElement.dataset.position = position
         }