webcoreui 0.0.10 → 0.0.12

package/scss/global/theme.scss

@@ -0,0 +1,140 @@
+@import '../config';
+
+@mixin Theme($theme: 'dark', $selector: ':root') {
+    @if $theme == 'dark' {
+        #{$selector} {
+            --w-color-scheme: dark;
+            --w-color-primary: #FFF;
+            --w-color-primary-10: #DDD;
+            --w-color-primary-20: #BBB;
+            --w-color-primary-30: #555;
+            --w-color-primary-40: #333;
+            --w-color-primary-50: #252525;
+            --w-color-primary-60: #111;
+            --w-color-primary-70: #000;
+
+            --w-color-info: #0ABDE3;
+            --w-color-info-accent: #48DBFB;
+            --w-color-info-fg: #000;
+            --w-color-success: #10AC84;
+            --w-color-success-accent: #1DD1A1;
+            --w-color-success-fg: #000;
+            --w-color-warning: #FF9F43;
+            --w-color-warning-accent: #f7AA61;
+            --w-color-warning-fg: #000;
+            --w-color-alert: #E73F40;
+            --w-color-alert-accent: #EE5253;
+            --w-color-alert-fg: #FFF;
+        }
+    }
+
+    @if $theme == 'light' {
+        #{$selector} {
+            --w-color-scheme: light;
+            --w-color-primary: #000;
+            --w-color-primary-10: #111;
+            --w-color-primary-20: #333;
+            --w-color-primary-30: #555;
+            --w-color-primary-40: #EEE;
+            --w-color-primary-50: #DDD;
+            --w-color-primary-60: #FAFAFA;
+            --w-color-primary-70: #FFF;
+        
+            --w-color-info: #0ABDE3;
+            --w-color-info-accent: #48DBFB;
+            --w-color-info-fg: #000;
+            --w-color-success: #10AC84;
+            --w-color-success-accent: #1DD1A1;
+            --w-color-success-fg: #000;
+            --w-color-warning: #FF9F43;
+            --w-color-warning-accent: #f7AA61;
+            --w-color-warning-fg: #000;
+            --w-color-alert: #E73F40;
+            --w-color-alert-accent: #EE5253;
+            --w-color-alert-fg: #FFF;
+        }
+    }
+
+    @if $theme == 'midnight' {
+        #{$selector} {
+            --w-color-scheme: dark;
+            --w-color-primary: #FFF;
+            --w-color-primary-10: #EEE;
+            --w-color-primary-20: #a5b7cf;
+            --w-color-primary-30: #516580;
+            --w-color-primary-40: #2d4463;
+            --w-color-primary-50: #20344e;
+            --w-color-primary-60: #101a2d;
+            --w-color-primary-70: #061321;
+
+            --w-color-info: #1058b6;
+            --w-color-info-accent: #176ee0;
+            --w-color-info-fg: #FFF;
+            --w-color-success: #10ac95;
+            --w-color-success-accent: #1DD1A1;
+            --w-color-success-fg: #000;
+            --w-color-warning: #FF9F43;
+            --w-color-warning-accent: #f7AA61;
+            --w-color-warning-fg: #000;
+            --w-color-alert: #E73F40;
+            --w-color-alert-accent: #EE5253;
+            --w-color-alert-fg: #FFF;
+        }
+    }
+
+    @if $theme == green {
+        #{$selector} {
+            --w-color-scheme: dark;
+            --w-color-primary: #FFF;
+            --w-color-primary-10: #EEE;
+            --w-color-primary-20: #b7ffe4;
+            --w-color-primary-30: #dad7cd;
+            --w-color-primary-40: #10AC84;
+            --w-color-primary-50: #4d6e4c;
+            --w-color-primary-60: #315037;
+            --w-color-primary-70: #22392d;
+
+            --w-color-info: #0ABDE3;
+            --w-color-info-accent: #48DBFB;
+            --w-color-info-fg: #000;
+            --w-color-success: #10AC84;
+            --w-color-success-accent: #1DD1A1;
+            --w-color-success-fg: #000;
+            --w-color-warning: #FF9F43;
+            --w-color-warning-accent: #f7AA61;
+            --w-color-warning-fg: #000;
+            --w-color-alert: #E73F40;
+            --w-color-alert-accent: #EE5253;
+            --w-color-alert-fg: #FFF;
+        }
+    }
+
+    @if $theme == beige {
+        #{$selector} {
+            --w-color-scheme: dark;
+            --w-color-primary: #000;
+            --w-color-primary-10: #111;
+            --w-color-primary-20: #97725c;
+            --w-color-primary-30: #d6ccc2;
+            --w-color-primary-40: #e3d5ca;
+            --w-color-primary-50: #ecddcd;
+            --w-color-primary-60: #f1e6da;
+            --w-color-primary-70: #f5ebe0;
+
+            --w-color-info: #0ABDE3;
+            --w-color-info-accent: #48DBFB;
+            --w-color-info-fg: #000;
+            --w-color-success: #10AC84;
+            --w-color-success-accent: #1DD1A1;
+            --w-color-success-fg: #000;
+            --w-color-warning: #FF9F43;
+            --w-color-warning-accent: #f7AA61;
+            --w-color-warning-fg: #000;
+            --w-color-alert: #E73F40;
+            --w-color-alert-accent: #EE5253;
+            --w-color-alert-fg: #FFF;
+        }
+    }
+}
+
+

package/scss/global/tooltip.scss

@@ -11,6 +11,8 @@
             opacity: 0;
             left: 50%;
             transform: translate(-50%, 5px);
+            pointer-events: none;
+            z-index: 99;
         }
 
         &::before {
@@ -21,7 +23,7 @@
             background: var(--w-tooltip-background);
             color: var(--w-tooltip-color);
             padding: 0 5px;
-            top: -30px;
+            bottom: calc(100% + 5px);
             width: max-content;
             line-height: 1.8;
             max-width: 300px;
@@ -41,6 +43,7 @@
         &:hover::before,
         &:hover::after {
             opacity: 1;
+            pointer-events: all;
             transform: translate(-50%, 0);
         }
 
@@ -51,8 +54,8 @@
             }
 
             &::before {
-                top: auto;
-                bottom: -30px;
+                top: calc(100% + 5px);
+                bottom: auto;
             }
 
             &::after {
@@ -79,7 +82,7 @@
             }
 
             &::before {
-                top: auto;
+                bottom: auto;
             }
 
             &::after {
@@ -108,7 +111,7 @@
             }
 
             &::before {
-                top: auto;
+                bottom: auto;
             }
 
             &::after {

package/scss/global/utility.scss

@@ -10,19 +10,48 @@
     .grid {
         display: grid;
         gap: 20px;
+
+        &.col-2 {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
     }
 
     .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;
+        }
     }
 
     .my {

package/scss/global.scss

@@ -1,3 +1,5 @@
 @import './global/elements.scss';
+@import './global/scrollbar.scss';
+@import './global/theme.scss';
 @import './global/tooltip.scss';
 @import './global/utility.scss';

package/scss/resets.scss

@@ -20,11 +20,11 @@
     }
     
     body {
-        background: #000;
-        color: #FFF;
+        background: var(--w-color-primary-70);
+        color: var(--w-color-primary);
         margin: 0;
         font-size: 18px;
-        font-family: Regular, sans-serif;
+        font-family: Regular, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     }
 
     h1,
@@ -34,11 +34,11 @@
     h5,
     h6,
     strong {
-        font-family: Bold, sans-serif;
+        font-family: Bold, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     }
 
     a {
-        color: #FFF;
+        color: var(--w-color-primary);
         text-decoration: none;
     }
 

package/scss/setup.scss

@@ -4,32 +4,37 @@ $config: (
     includeResets: true,
     includeHelperClasses: true,
     includeElementStyles: true,
-    includeTooltip: true
+    includeTooltip: true,
+    includeScrollbarStyles: true
 );
 
-:root {
-    --w-avatar-border: #000;
-    --w-rating-color: #FFF;
-    --w-rating-empty-color: #BBB;
+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-switch-off-color: #252525;
-    --w-switch-on-color: #FFF;
-    --w-checkbox-color: #FFF;
-    --w-radio-color: #FFF;
-    --w-spinner-color: #FFF;
+    --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-tooltip-background: #FFF;
-    --w-tooltip-color: #000;
-    --w-timeline-color: #252525;
-    --w-timeline-text-color: #FFF;
+    --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-progress-color: #FFF;
-    --w-progress-background: #252525;
-    --w-progress-stripe-light: #FFF;
-    --w-progress-stripe-dark: #DDD;
+    --w-tooltip-background: var(--w-color-primary);
+    --w-tooltip-color: var(--w-color-primary-70);
 }
 
 @function config($key) {
@@ -51,7 +56,23 @@ $config: (
         @include Elements();
     }
 
+    @if (config('includeScrollbarStyles')) {
+        @include Scrollbar();
+    }
+
     @if (config('includeTooltip')) {
         @include Tooltip();
     }
+
+    @if (config('theme')) {
+        @include Theme(config('theme'));
+    }
+
+    @if (config('themes')) {
+        @each $theme, $selector in config('themes') {
+            @include Theme($theme, $selector);
+        }
+    } @else if (not config('theme')) {
+        @include Theme('dark');
+    }
 }

package/svelte.d.ts

@@ -1,18 +1,22 @@
 import type { AccordionProps } from './components/Accordion/accordion'
 import type { AlertProps } from './components/Alert/alert'
 import type { AvatarProps } from './components/Avatar/avatar'
-import type { BadgeProps } from './components/Badge/badge'
-import type { ButtonProps } from './components/Button/button'
+import type { SvelteBadgeProps } from './components/Badge/badge'
+import type { SvelteButtonProps } from './components/Button/button'
 import type { CardProps } from './components/Card/card'
-import type { CheckboxProps } from './components/Checkbox/checkbox'
+import type { SvelteCheckboxProps } from './components/Checkbox/checkbox'
 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 { ProgressProps } from './components/Progress/progress'
-import type { RadioProps } from './components/Radio/radio'
+import type { SvelteRadioProps } from './components/Radio/radio'
 import type { RatingProps } from './components/Rating/rating'
 import type { SpinnerProps } from './components/Spinner/spinner'
-import type { SwitchProps } from './components/Switch/switch'
+import type { SvelteSwitchProps } from './components/Switch/switch'
+import type { TableProps } from './components/Table/table'
 import type { TabsProps } from './components/Tabs/tabs'
+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'
@@ -21,18 +25,22 @@ declare module 'webcoreui/svelte' {
     export function Accordion(_props: AccordionProps): any
 	export function Alert(_props: AlertProps): any
 	export function Avatar(_props: AvatarProps): any
-	export function Badge(_props: BadgeProps): any
-	export function Button(_props: ButtonProps): any
+	export function Badge(_props: SvelteBadgeProps): any
+	export function Button(_props: SvelteButtonProps): any
 	export function Card(_props: CardProps): any
-	export function Checkbox(_props: CheckboxProps): any
+	export function Checkbox(_props: SvelteCheckboxProps): 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 Progress(_props: ProgressProps): any
-	export function Radio(_props: RadioProps): any
+	export function Radio(_props: SvelteRadioProps): any
 	export function Rating(_props: RatingProps): any
 	export function Spinner(_props: SpinnerProps): any
-	export function Switch(_props: SwitchProps): any
+	export function Switch(_props: SvelteSwitchProps): any
+	export function Table(_props: TableProps): any
 	export function Tabs(_props: TabsProps): any
+	export function ThemeSwitcher(_props: ThemeSwitcherProps): any
 	export function Timeline(_props: TimelineProps): any
 	export function TimelineItem(_props: TimelineItemProps): any
 	export function Toast(_props: ToastProps): any

package/svelte.js

@@ -7,12 +7,16 @@ import CardComponent from './components/Card/Card.svelte'
 import CheckboxComponent from './components/Checkbox/Checkbox.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 ProgressComponent from './components/Progress/Progress.svelte'
 import RadioComponent from './components/Radio/Radio.svelte'
 import RatingComponent from './components/Rating/Rating.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 ThemeSwitcherComponent from './components/ThemeSwitcher/ThemeSwitcher.svelte'
 import TimelineComponent from './components/Timeline/Timeline.svelte'
 import TimelineItemComponent from './components/TimelineItem/TimelineItem.svelte'
 import ToastComponent from './components/Toast/Toast.svelte'
@@ -26,12 +30,16 @@ export const Card = CardComponent
 export const Checkbox = CheckboxComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
+export const Input = InputComponent
+export const Menu = MenuComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
 export const Spinner = SpinnerComponent
 export const Switch = SwitchComponent
+export const Table = TableComponent
 export const Tabs = TabsComponent
+export const ThemeSwitcher = ThemeSwitcherComponent
 export const Timeline = TimelineComponent
 export const TimelineItem = TimelineItemComponent
 export const Toast = ToastComponent

package/utils/classNames.ts

@@ -0,0 +1,4 @@
+export const classNames = (classes: any[]) => classes
+    .filter(Boolean)
+    .flat(Infinity)
+    .join(' ')

package/utils/cookies.ts

@@ -0,0 +1,28 @@
+export const setCookie = (name: string, value: string, days: number) => {
+    let expires = ''
+
+    if (days) {
+        const date = new Date()
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
+        expires = '; expires=' + date.toUTCString()
+    }
+
+    document.cookie = name + '=' + (value || '')  + expires + '; path=/'
+}
+
+export const getCookie = (name: string) => {
+    const cookies = document.cookie.split(';')
+
+    for (const cookie of cookies) {
+        if (cookie.indexOf(name + '=') > -1) {
+            return cookie.split('=')[1]
+        }
+    }
+
+    return null
+}
+
+export const removeCookie = (name: string) => {
+    document.cookie = name + '=; Max-Age=-1;'
+}
+

package/utils/event.ts

@@ -0,0 +1,17 @@
+export const dispatch = (event: string, detail: any) => {
+    document.dispatchEvent(new CustomEvent(event, {
+        detail
+    }))
+}
+
+export const listen = (event: string, callback: (e: any) => any) => {
+    const fn = (e: any) => callback(e.detail)
+
+    document.addEventListener(event, fn)
+
+    return {
+        remove() {
+            document.removeEventListener(event, fn)
+        }
+    }
+}

package/utils/toast.ts

@@ -26,40 +26,43 @@ export const toast = (config: Toast | string) => {
         position
     } = (typeof config === 'string' ? {} : config) as Toast
 
-    const htmlElement = document.querySelector(element)
+    const htmlElement = document.querySelector(element) as HTMLElement
 
     if (htmlElement) {
         if (theme) {
-            htmlElement.classList.add(theme)
+            htmlElement.dataset.theme = theme
         }
         
         if (position) {
-            htmlElement.classList.add(position, 'no-anim')
+            htmlElement.dataset.position = position
         }
 
         if (title) {
-            const titleElement = htmlElement.querySelector('.alert-title')
+            const titleElement = htmlElement.querySelector('[data-id="title"]')
 
             titleElement ? titleElement.innerHTML = title : null
         }
 
         if (content) {
-            const contentElement = htmlElement.querySelector('.alert-body')
+            const contentElement = htmlElement.querySelector('[data-id="body"]')
 
             contentElement ? contentElement.innerHTML = content : null
         }
 
         setTimeout(() => {
-            htmlElement.classList.remove('no-anim')
-            htmlElement.classList.add('show')
+            htmlElement.dataset.show = 'true'
         }, 0)
 
         setTimeout(() => {
-            htmlElement.classList.remove('show')
+            htmlElement.dataset.show = ''
         }, timeout || defaultTimeout)
     }
 }
 
 export const hideToast = (element: string) => {
-    document.querySelector(element)?.classList.remove('show')
+    const htmlElement = document.querySelector(element) as HTMLElement
+
+    if (htmlElement) {
+        htmlElement.dataset.show = ''
+    }
 }

package/components/Alert/alert.scss

@@ -1,53 +0,0 @@
-@import '../../scss/config.scss';
-
-.w-alert {
-    border: 1px solid #252525;
-    border-radius: 5px;
-    padding: 15px;
-    display: flex;
-
-    &.col {
-        flex-direction: column;
-    }
-
-    &:not(.col) {
-        gap: 10px;
-    }
-
-    &.info {
-        border: 1px solid #0abde3;
-        color: #0abde3;
-    }
-
-    &.success {
-        border: 1px solid #1dd1a1;
-        color: #1dd1a1;
-    }
-
-    &.warning {
-        border: 1px solid #ff9f43;
-        color: #ff9f43;
-    }
-
-    &.alert {
-        border: 1px solid #e73f40;
-        color: #e73f40;
-    }
-
-    svg {
-        width: 20px;
-        height: 20px;
-        margin-top: 1px;
-    }
-
-    .alert-title {
-        display: block;
-        margin-bottom: 5px;
-    }
-
-    .alert-body {
-        font-size: 16px;
-        color: #BBB;
-        line-height: 1.5;
-    }
-}