webcoreui 0.0.12 → 0.2.0

package/scss/resets.scss

@@ -1,4 +1,6 @@
-@mixin Resets() {
+@use './config.scss' as *;
+
+@mixin resets() {
     @if (config('fontRegular')) {
         @font-face {
             font-family: Regular;
@@ -18,12 +20,12 @@
     * {
         box-sizing: border-box;
     }
-    
+
     body {
-        background: var(--w-color-primary-70);
-        color: var(--w-color-primary);
-        margin: 0;
-        font-size: 18px;
+        @include background(primary-70);
+        @include typography(primary, default);
+        @include spacing(m0);
+
         font-family: Regular, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     }
 
@@ -33,16 +35,72 @@
     h4,
     h5,
     h6,
-    strong {
+    strong,
+    b {
         font-family: Bold, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     }
 
     a {
-        color: var(--w-color-primary);
-        text-decoration: none;
+        @include transition(color);
+        @include typography(primary);
     }
 
     button {
         font-family: Regular;
     }
+
+    code,
+    pre {
+        @include border(primary-50);
+        @include border-radius(md);
+        @include typography(md);
+    }
+
+    code {
+        @include spacing(px-sm);
+        display: inline-block;
+    }
+
+    pre {
+        @include background(primary-60);
+        @include spacing(p-sm, my-default);
+
+    }
+
+    figure {
+        @include spacing(my-default);
+        @include layout(inline-flex, column, v-center, xs);
+    }
+
+    figcaption {
+        @include typography(md, primary-20);  
+        
+        a {
+            @include typography(primary-20);
+
+            &:hover {
+                @include typography(primary); 
+            }
+        }
+    }
+
+    p, ul, ol {
+        @include typography(hlg);
+        @include spacing(my-default);
+    }
+
+    li {
+        @include spacing(mb-sm);
+    }
+
+    blockquote {
+        @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,77 +2,50 @@
 
 $config: (
     includeResets: true,
-    includeHelperClasses: true,
-    includeElementStyles: true,
+    includeUtilities: true,
     includeTooltip: true,
     includeScrollbarStyles: true
 );
 
 body {
-    --w-avatar-border: var(--w-color-primary-70);
-    --w-checkbox-color: var(--w-color-primary);
-    --w-progress-color: var(--w-color-primary);
-    --w-progress-background: var(--w-color-primary-50);
-    --w-progress-stripe-light: var(--w-color-primary);
-    --w-progress-stripe-dark: var(--w-color-primary-10);
-    --w-radio-color: var(--w-color-primary);
-    --w-rating-color: var(--w-color-primary);
-    --w-rating-empty-color: var(--w-color-primary);
-    --w-rating-empty-background: var(--w-color-primary-70);
-    --w-rating-size: 18px;
-    --w-scrollbar-bg: var(--w-color-primary-60);
-    --w-scrollbar-fg: var(--w-color-primary-50);
-    --w-spinner-color: var(--w-color-primary);
-    --w-spinner-width: 2px;
-    --w-spinner-speed: 2s;
-    --w-spinner-size: 30px;
-    --w-spinner-dash: 8;
-    --w-switch-off-color: var(--w-color-primary-50);
-    --w-switch-on-color: var(--w-color-primary);
-    --w-theme-switcher-size: 20px;
-    --w-timeline-color: var(--w-color-primary-50);
-    --w-timeline-text-color: var(--w-color-primary);
-    --w-timeline-counter: decimal;
-    --w-tooltip-background: var(--w-color-primary);
-    --w-tooltip-color: var(--w-color-primary-70);
+    --w-sm-radius: 2px;
+    --w-md-radius: 5px;
+    --w-lg-radius: 10px;
+    --w-xl-radius: 15px;
 }
 
 @function config($key) {
     @return map.get($config, $key);
 }
 
-@mixin Setup($customConfig: ()) {
+@mixin setup($customConfig: ()) {
     $config: map.merge($config, $customConfig) !global;
 
     @if (config('includeResets')) {
-        @include Resets();
+        @include resets();
     }
 
-    @if (config('includeHelperClasses')) {
-        @include Utility();
-    }
-
-    @if (config('includeElementStyles')) {
-        @include Elements();
+    @if (config('includeUtilities')) {
+        @include utility();
     }
 
     @if (config('includeScrollbarStyles')) {
-        @include Scrollbar();
+        @include scrollbar();
     }
 
     @if (config('includeTooltip')) {
-        @include Tooltip();
+        @include tooltip();
     }
 
     @if (config('theme')) {
-        @include Theme(config('theme'));
+        @include theme(config('theme'));
     }
 
     @if (config('themes')) {
         @each $theme, $selector in config('themes') {
-            @include Theme($theme, $selector);
+            @include theme($theme, $selector);
         }
     } @else if (not config('theme')) {
-        @include Theme('dark');
+        @include theme('dark');
     }
 }

package/svelte.d.ts

@@ -9,9 +9,11 @@ import type { ConditionalWrapperProps } from './components/ConditionalWrapper/co
 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 { ProgressProps } from './components/Progress/progress'
 import type { SvelteRadioProps } from './components/Radio/radio'
 import type { RatingProps } from './components/Rating/rating'
+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'
@@ -33,9 +35,11 @@ declare module 'webcoreui/svelte' {
 	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 Progress(_props: ProgressProps): any
 	export function Radio(_props: SvelteRadioProps): any
 	export function Rating(_props: RatingProps): 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

package/svelte.js

@@ -9,9 +9,11 @@ import ConditionalWrapperComponent from './components/ConditionalWrapper/Conditi
 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 ProgressComponent from './components/Progress/Progress.svelte'
 import RadioComponent from './components/Radio/Radio.svelte'
 import RatingComponent from './components/Rating/Rating.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'
@@ -32,9 +34,11 @@ export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
 export const Input = InputComponent
 export const Menu = MenuComponent
+export const Modal = ModalComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
+export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent

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/toast.ts

@@ -1,4 +1,5 @@
 import type { AlertProps } from '../components/Alert/alert'
+import type { ToastProps } from '../components/Toast/toast'
 
 type Toast = {
     element: string
@@ -6,12 +7,12 @@ type Toast = {
     title?: AlertProps['title']
     content?: string
     theme?: AlertProps['theme']
-    position?: string
+    position?: ToastProps['position']
 }
 
 let defaultTimeout = 5000
 
-export let setDefaultTimeout = (time: number) => defaultTimeout = time
+export const setDefaultTimeout = (time: number) => defaultTimeout = time
 
 export const toast = (config: Toast | string) => {
     const element = typeof config === 'string'