webcoreui 0.0.8 → 0.0.10

package/scss/setup.scss

@@ -3,9 +3,35 @@
 $config: (
     includeResets: true,
     includeHelperClasses: true,
-    includeElementStyles: true
+    includeElementStyles: true,
+    includeTooltip: true
 );
 
+:root {
+    --w-avatar-border: #000;
+    --w-rating-color: #FFF;
+    --w-rating-empty-color: #BBB;
+    --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-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-timeline-counter: decimal;
+    --w-progress-color: #FFF;
+    --w-progress-background: #252525;
+    --w-progress-stripe-light: #FFF;
+    --w-progress-stripe-dark: #DDD;
+}
+
 @function config($key) {
     @return map.get($config, $key);
 }
@@ -24,4 +50,8 @@ $config: (
     @if (config('includeElementStyles')) {
         @include Elements();
     }
+
+    @if (config('includeTooltip')) {
+        @include Tooltip();
+    }
 }

package/svelte.d.ts

@@ -1,19 +1,39 @@
-
+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 { CardProps } from './components/Card/card'
+import type { CheckboxProps } from './components/Checkbox/checkbox'
+import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { IconProps } from './components/Icon/icon'
+import type { ProgressProps } from './components/Progress/progress'
+import type { RadioProps } 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 { TabsProps } from './components/Tabs/tabs'
+import type { TimelineProps } from './components/Timeline/timeline'
+import type { TimelineItemProps } from './components/TimelineItem/timelineitem'
+import type { ToastProps } from './components/Toast/toast'
+    
 declare module 'webcoreui/svelte' {
-    import type { AccordionProps } from './components/Accordion/accordion'
-	import type { AlertProps } from './components/Alert/alert'
-	import type { BadgeProps } from './components/Badge/badge'
-	import type { ButtonProps } from './components/Button/button'
-	import type { CardProps } from './components/Card/card'
-	import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
-	import type { IconProps } from './components/Icon/icon'
-
     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 Card(_props: CardProps): any
+	export function Checkbox(_props: CheckboxProps): any
 	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
 	export function Icon(_props: IconProps): any
-}
-    
+	export function Progress(_props: ProgressProps): any
+	export function Radio(_props: RadioProps): any
+	export function Rating(_props: RatingProps): any
+	export function Spinner(_props: SpinnerProps): any
+	export function Switch(_props: SwitchProps): any
+	export function Tabs(_props: TabsProps): any
+	export function Timeline(_props: TimelineProps): any
+	export function TimelineItem(_props: TimelineItemProps): any
+	export function Toast(_props: ToastProps): any
+}

package/svelte.js

@@ -1,15 +1,37 @@
 import AccordionComponent from './components/Accordion/Accordion.svelte'
 import AlertComponent from './components/Alert/Alert.svelte'
+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 CheckboxComponent from './components/Checkbox/Checkbox.svelte'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.svelte'
 import IconComponent from './components/Icon/Icon.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 TabsComponent from './components/Tabs/Tabs.svelte'
+import TimelineComponent from './components/Timeline/Timeline.svelte'
+import TimelineItemComponent from './components/TimelineItem/TimelineItem.svelte'
+import ToastComponent from './components/Toast/Toast.svelte'
 
 export const Accordion = AccordionComponent
 export const Alert = AlertComponent
+export const Avatar = AvatarComponent
 export const Badge = BadgeComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
+export const Checkbox = CheckboxComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
-export const Icon = IconComponent
+export const Icon = IconComponent
+export const Progress = ProgressComponent
+export const Radio = RadioComponent
+export const Rating = RatingComponent
+export const Spinner = SpinnerComponent
+export const Switch = SwitchComponent
+export const Tabs = TabsComponent
+export const Timeline = TimelineComponent
+export const TimelineItem = TimelineItemComponent
+export const Toast = ToastComponent

package/utils/toast.ts

@@ -0,0 +1,65 @@
+import type { AlertProps } from '../components/Alert/alert'
+
+type Toast = {
+    element: string
+    timeout?: number
+    title?: AlertProps['title']
+    content?: string
+    theme?: AlertProps['theme']
+    position?: string
+}
+
+let defaultTimeout = 5000
+
+export let setDefaultTimeout = (time: number) => defaultTimeout = time
+
+export const toast = (config: Toast | string) => {
+    const element = typeof config === 'string'
+        ? config
+        : config.element
+
+    const {
+        timeout,
+        title,
+        content,
+        theme,
+        position
+    } = (typeof config === 'string' ? {} : config) as Toast
+
+    const htmlElement = document.querySelector(element)
+
+    if (htmlElement) {
+        if (theme) {
+            htmlElement.classList.add(theme)
+        }
+        
+        if (position) {
+            htmlElement.classList.add(position, 'no-anim')
+        }
+
+        if (title) {
+            const titleElement = htmlElement.querySelector('.alert-title')
+
+            titleElement ? titleElement.innerHTML = title : null
+        }
+
+        if (content) {
+            const contentElement = htmlElement.querySelector('.alert-body')
+
+            contentElement ? contentElement.innerHTML = content : null
+        }
+
+        setTimeout(() => {
+            htmlElement.classList.remove('no-anim')
+            htmlElement.classList.add('show')
+        }, 0)
+
+        setTimeout(() => {
+            htmlElement.classList.remove('show')
+        }, timeout || defaultTimeout)
+    }
+}
+
+export const hideToast = (element: string) => {
+    document.querySelector(element)?.classList.remove('show')
+}