webcoreui 0.0.9 → 0.0.10

package/svelte.d.ts

@@ -1,18 +1,23 @@
-
+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 { 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 { RadioProps } from './components/Radio/radio'
-	import type { RatingProps } from './components/Rating/rating'
-	import type { SwitchProps } from './components/Switch/switch'
-
     export function Accordion(_props: AccordionProps): any
 	export function Alert(_props: AlertProps): any
 	export function Avatar(_props: AvatarProps): any
@@ -22,8 +27,13 @@ declare module 'webcoreui/svelte' {
 	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

@@ -7,9 +7,15 @@ 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
@@ -20,6 +26,12 @@ export const Card = CardComponent
 export const Checkbox = CheckboxComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
+export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
-export const Switch = SwitchComponent
+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')
+}