webcoreui 0.3.0 → 0.4.0

package/components/ThemeSwitcher/ThemeSwitcher.astro

@@ -1,107 +1,108 @@
----
-import type { ThemeSwitcherProps } from './themeswitcher'
-import styles from './themeswitcher.module.scss'
-
-interface Props extends ThemeSwitcherProps {}
-
-const {
-    themes,
-    toggle,
-    size,
-    className
-} = Astro.props
-
-const classes = [
-    styles.switcher,
-    toggle && styles.toggle,
-    className
-]
-
-const primaryTheme = themes[Object.keys(themes)[0]]
-const secondaryTheme = themes[Object.keys(themes)[1]]
-const useIcons = Astro.slots.has('primaryIcon') && Astro.slots.has('secondaryIcon') 
-
-const buttonClasses = [
-    styles.switch,
-    useIcons && styles.icons
-]
----
-
-<div
-    class:list={classes}
-    style={size ? `--w-theme-switcher-size: ${size}px;` : null}
-    data-id="w-theme-switcher"
-    data-primary-theme={primaryTheme}
-    data-secondary-theme={toggle ? secondaryTheme : undefined}
->
-    {Object.keys(themes as {}).map((theme, index) => (
-        <button
-            style={!useIcons ? `background:${theme};` : undefined}
-            data-theme={themes[theme]}
-            aria-label={themes[theme]}
-            class:list={buttonClasses}
-        >
-            {index === 0 && <slot name="primaryIcon" />}
-            {index !== 0 && <slot name="secondaryIcon" />}
-        </button>
-    ))}
-</div>
-
-<script>
-    import { setCookie, getCookie } from '../../utils/cookies'
-    import { listen, dispatch } from '../../utils/event'
-
-    const switchers = document.querySelectorAll('[data-id="w-theme-switcher"]')
-    
-    let currentTheme = localStorage.getItem('w-theme')
-        || getCookie('w-theme')
-        || (switchers[0] as HTMLDivElement).dataset.primaryTheme
-        || ''
-
-    const setActiveButton = (buttons: HTMLButtonElement[]) => {
-        buttons.forEach(button => button.dataset.active = 'false')
-
-        buttons.forEach(button => {
-            if (button.dataset.theme === currentTheme) {
-                button.dataset.active = 'true'
-            }
-        })
-    }
-
-    Array.from(switchers).forEach(switcher => {
-        const buttons = Array.from(switcher.querySelectorAll('button'))
-
-        setActiveButton(buttons)
-
-        listen('theme-switched', theme => {
-            currentTheme = theme
-
-            setActiveButton(buttons)
-        })
-
-        switcher.addEventListener('click', event => {
-            const target = event.target as HTMLButtonElement
-
-            if (target.nodeName === 'BUTTON') {
-                const toggleTheme = (switcher as HTMLDivElement).dataset.secondaryTheme
-
-                const theme = toggleTheme
-                    ? toggleTheme === target.dataset.theme
-                        ? (target.previousElementSibling as HTMLButtonElement).dataset.theme as string
-                        : (target.nextElementSibling as HTMLButtonElement).dataset.theme as string
-                    : target.dataset.theme as string
-
-                document.body.classList.replace(currentTheme, theme)
-
-                currentTheme = theme
-
-                setActiveButton(buttons)
-                setCookie('w-theme', currentTheme, 30)
-                localStorage.setItem('w-theme', currentTheme)
-
-                dispatch('theme-switched', currentTheme)
-            }
-        })
-    })
-</script>
-
+---
+import type { ThemeSwitcherProps } from './themeswitcher'
+
+import styles from './themeswitcher.module.scss'
+
+interface Props extends ThemeSwitcherProps {}
+
+const {
+    themes,
+    toggle,
+    size,
+    className
+} = Astro.props
+
+const classes = [
+    styles.switcher,
+    toggle && styles.toggle,
+    className
+]
+
+const primaryTheme = themes[Object.keys(themes)[0]]
+const secondaryTheme = themes[Object.keys(themes)[1]]
+const useIcons = Astro.slots.has('primaryIcon') && Astro.slots.has('secondaryIcon')
+
+const buttonClasses = [
+    styles.switch,
+    useIcons && styles.icons
+]
+---
+
+<div
+    class:list={classes}
+    style={size ? `--w-theme-switcher-size: ${size}px;` : null}
+    data-id="w-theme-switcher"
+    data-primary-theme={primaryTheme}
+    data-secondary-theme={toggle ? secondaryTheme : undefined}
+>
+    {Object.keys(themes).map((theme, index) => (
+        <button
+            style={!useIcons ? `background:${theme};` : undefined}
+            data-theme={themes[theme]}
+            aria-label={themes[theme]}
+            class:list={buttonClasses}
+        >
+            {index === 0 && <slot name="primaryIcon" />}
+            {index !== 0 && <slot name="secondaryIcon" />}
+        </button>
+    ))}
+</div>
+
+<script>
+    import { getCookie, setCookie } from '../../utils/cookies'
+    import { dispatch, listen } from '../../utils/event'
+
+    const switchers = document.querySelectorAll('[data-id="w-theme-switcher"]')
+
+    let currentTheme = localStorage.getItem('w-theme')
+        || getCookie('w-theme')
+        || (switchers[0] as HTMLDivElement).dataset.primaryTheme
+        || ''
+
+    const setActiveButton = (buttons: HTMLButtonElement[]) => {
+        buttons.forEach(button => button.dataset.active = 'false')
+
+        buttons.forEach(button => {
+            if (button.dataset.theme === currentTheme) {
+                button.dataset.active = 'true'
+            }
+        })
+    }
+
+    Array.from(switchers).forEach(switcher => {
+        const buttons = Array.from(switcher.querySelectorAll('button'))
+
+        setActiveButton(buttons)
+
+        listen('theme-switched', theme => {
+            currentTheme = theme
+
+            setActiveButton(buttons)
+        })
+
+        switcher.addEventListener('click', event => {
+            const target = event.target as HTMLButtonElement
+
+            if (target.nodeName === 'BUTTON') {
+                const toggleTheme = (switcher as HTMLDivElement).dataset.secondaryTheme
+
+                const theme = toggleTheme
+                    ? toggleTheme === target.dataset.theme
+                        ? (target.previousElementSibling as HTMLButtonElement).dataset.theme as string
+                        : (target.nextElementSibling as HTMLButtonElement).dataset.theme as string
+                    : target.dataset.theme as string
+
+                document.body.classList.replace(currentTheme, theme)
+
+                currentTheme = theme
+
+                setActiveButton(buttons)
+                setCookie('w-theme', currentTheme, 30)
+                localStorage.setItem('w-theme', currentTheme)
+
+                dispatch('theme-switched', currentTheme)
+            }
+        })
+    })
+</script>
+

package/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
     import { onMount } from 'svelte'
     import type { ThemeSwitcherProps } from './themeswitcher'
-    
+
     import { classNames } from '../../utils/classNames'
-    import { listen, dispatch } from '../../utils/event'
-    import { setCookie, getCookie } from '../../utils/cookies'
+    import { getCookie, setCookie } from '../../utils/cookies'
+    import { dispatch, listen } from '../../utils/event'
 
     import styles from './themeswitcher.module.scss'
 
@@ -24,10 +24,11 @@
 
     const primaryTheme = themes[Object.keys(themes)[0]]
     const secondaryTheme = themes[Object.keys(themes)[1]]
-    const useIcons = $$slots.primaryIcon && $$slots.secondaryIcon 
+    const useIcons = $$slots.primaryIcon && $$slots.secondaryIcon
 
     const setTheme = (theme: string | number) => {
         if (typeof theme === 'number') {
+            // eslint-disable-next-line no-param-reassign
             theme = toggled ? primaryTheme : secondaryTheme
         }
 

package/components/ThemeSwitcher/ThemeSwitcher.tsx

@@ -1,90 +1,91 @@
-import React, { useState, useEffect } from 'react'
-import type { ReactThemeSwitcherProps } from './themeswitcher'
-
-import { setCookie, getCookie } from '../../utils/cookies'
-import { listen, dispatch } from '../../utils/event'
-import { classNames } from '../../utils/classNames'
-
-import styles from './themeswitcher.module.scss'
-
-const ThemeSwitcher = ({
-    themes,
-    toggle,
-    size,
-    primaryIcon,
-    secondaryIcon,
-    className
-}: ReactThemeSwitcherProps) => {
-    const [currentTheme, setCurrentTheme] = useState('')
-    const [toggled, setToggled] = useState(false)
-
-    const classes = classNames([
-        styles.switcher,
-        toggle && styles.toggle,
-        className
-    ])
-
-    const sizeStyles = size
-        ? { '--w-theme-switcher-size': `${size}px` } as React.CSSProperties
-        : undefined
-
-    const primaryTheme = themes[Object.keys(themes)[0]]
-    const secondaryTheme = themes[Object.keys(themes)[1]]
-    const useIcons = primaryIcon && secondaryIcon 
-
-    const setTheme = (theme: string | number) => {
-        if (typeof theme === 'number') {
-            theme = toggled ? primaryTheme : secondaryTheme
-        }
-
-        document.body.classList.replace(currentTheme, theme)
-
-        setCookie('w-theme', theme, 30)
-        localStorage.setItem('w-theme', theme)
-
-        dispatch('theme-switched', theme)
-    }
-
-    useEffect(() => {
-        setCurrentTheme(
-            localStorage.getItem('w-theme')
-            || getCookie('w-theme')
-            || themes[Object.keys(themes)[0]]
-        )
-
-        if (toggle && currentTheme === secondaryTheme) {
-            setToggled(true)
-        }
-
-        listen('theme-switched', theme => {
-            setCurrentTheme(theme)
-            setToggled(theme === secondaryTheme)
-        })
-    }, [])
-
-    return (
-        <div
-            className={classes}
-            style={sizeStyles}
-        >
-            {Object.keys(themes as {}).map((theme, index) => (
-                <button
-                    key={index}
-                    onClick={() => setTheme(toggle ? index : themes[theme])}
-                    data-active={currentTheme === themes[theme]}
-                    aria-label={themes[theme]}
-                    style={!useIcons ? { background: theme } : undefined}
-                    className={classNames([
-                        styles.switch,
-                        useIcons && styles.icons
-                    ])}
-                >
-                    {index === 0 && primaryIcon}
-                    {index !== 0 && secondaryIcon}
-                </button>
-            ))}
-        </div>
-    )
-}
-
-export default ThemeSwitcher
+import React, { useEffect, useState } from 'react'
+import type { ReactThemeSwitcherProps } from './themeswitcher'
+
+import { classNames } from '../../utils/classNames'
+import { getCookie, setCookie } from '../../utils/cookies'
+import { dispatch, listen } from '../../utils/event'
+
+import styles from './themeswitcher.module.scss'
+
+const ThemeSwitcher = ({
+    themes,
+    toggle,
+    size,
+    primaryIcon,
+    secondaryIcon,
+    className
+}: ReactThemeSwitcherProps) => {
+    const [currentTheme, setCurrentTheme] = useState('')
+    const [toggled, setToggled] = useState(false)
+
+    const classes = classNames([
+        styles.switcher,
+        toggle && styles.toggle,
+        className
+    ])
+
+    const sizeStyles = size
+        ? { '--w-theme-switcher-size': `${size}px` } as React.CSSProperties
+        : undefined
+
+    const primaryTheme = themes[Object.keys(themes)[0]]
+    const secondaryTheme = themes[Object.keys(themes)[1]]
+    const useIcons = primaryIcon && secondaryIcon
+
+    const setTheme = (theme: string | number) => {
+        if (typeof theme === 'number') {
+            // eslint-disable-next-line no-param-reassign
+            theme = toggled ? primaryTheme : secondaryTheme
+        }
+
+        document.body.classList.replace(currentTheme, theme)
+
+        setCookie('w-theme', theme, 30)
+        localStorage.setItem('w-theme', theme)
+
+        dispatch('theme-switched', theme)
+    }
+
+    useEffect(() => {
+        setCurrentTheme(
+            localStorage.getItem('w-theme')
+            || getCookie('w-theme')
+            || themes[Object.keys(themes)[0]]
+        )
+
+        if (toggle && currentTheme === secondaryTheme) {
+            setToggled(true)
+        }
+
+        listen('theme-switched', theme => {
+            setCurrentTheme(theme)
+            setToggled(theme === secondaryTheme)
+        })
+    }, [])
+
+    return (
+        <div
+            className={classes}
+            style={sizeStyles}
+        >
+            {Object.keys(themes).map((theme, index) => (
+                <button
+                    key={index}
+                    onClick={() => setTheme(toggle ? index : themes[theme])}
+                    data-active={currentTheme === themes[theme]}
+                    aria-label={themes[theme]}
+                    style={!useIcons ? { background: theme } : undefined}
+                    className={classNames([
+                        styles.switch,
+                        useIcons && styles.icons
+                    ])}
+                >
+                    {index === 0 && primaryIcon}
+                    {index !== 0 && secondaryIcon}
+                </button>
+            ))}
+        </div>
+    )
+}
+
+export default ThemeSwitcher

package/components/Timeline/Timeline.astro

@@ -1,9 +1,10 @@
 ---
 import type { TimelineProps } from './timeline'
 
-import styles from './timeline.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './timeline.module.scss'
+
 interface Props extends TimelineProps {}
 
 const {
@@ -27,7 +28,7 @@ const classes = [
 const styleVariables = classNames([
     color && `--w-timeline-color: ${color};`,
     textColor && `--w-timeline-text-color: ${textColor};`,
-    counter && `--w-timeline-counter: ${counter};`,
+    counter && `--w-timeline-counter: ${counter};`
 ])
 ---
 

package/components/Timeline/Timeline.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { TimelineProps } from './timeline'
 
-    import styles from './timeline.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './timeline.module.scss'
+
     export let theme: TimelineProps['theme'] = null
     export let counter: TimelineProps['counter'] = null
     export let alternate: TimelineProps['alternate'] = false
@@ -23,7 +24,7 @@
     const styleVariables = classNames([
         color && `--w-timeline-color: ${color};`,
         textColor && `--w-timeline-text-color: ${textColor};`,
-        counter && `--w-timeline-counter: ${counter};`,
+        counter && `--w-timeline-counter: ${counter};`
     ])
 </script>
 

package/components/Timeline/Timeline.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import type { ReactTimelineProps } from './timeline'
 
-import styles from './timeline.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './timeline.module.scss'
+
 const Timeline = ({
     theme,
     counter,
@@ -25,7 +26,7 @@ const Timeline = ({
     const styleVariables = {
         ...(color && { '--w-timeline-color': color }),
         ...(textColor && { '--w-timeline-text-color': textColor }),
-        ...(counter && { '--w-timeline-counter': counter }),
+        ...(counter && { '--w-timeline-counter': counter })
     } as React.CSSProperties
 
     return (

package/components/TimelineItem/TimelineItem.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { TimelineItemProps } from './timelineitem'
 
-    import styles from './timelineitem.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './timelineitem.module.scss'
+
     export let title: TimelineItemProps['title'] = ''
     export let titleTag: TimelineItemProps['titleTag'] = 'span'
     export let className: TimelineItemProps['className'] = ''

package/components/TimelineItem/TimelineItem.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import type { ReactTimelineItemProps } from './timelineitem'
 
-import styles from './timelineitem.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './timelineitem.module.scss'
+
 const TimelineItem = ({
     title,
     TitleTag = 'span',

package/components/Toast/Toast.astro

@@ -1,10 +1,12 @@
 ---
 import type { ToastProps } from './toast'
+
 import Alert from '../Alert/Alert.astro'
 
-import styles from './toast.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './toast.module.scss'
+
 interface Props extends ToastProps {}
 
 const {

package/components/Toast/Toast.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
     import type { ToastProps } from './toast'
+
     import Alert from '../Alert/Alert.svelte'
 
-    import styles from './toast.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './toast.module.scss'
+
     export let position: ToastProps['position'] = null
     export let className: ToastProps['className'] = ''
 

package/components/Toast/Toast.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import type { ReactToastProps } from './toast'
+
 import Alert from '../Alert/Alert.tsx'
 
-import styles from './toast.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './toast.module.scss'
+
 const Toast = ({
     icon,
     position,

package/icons/moon.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M23 12.9878C22.3889 19.5232 15.8512 24.1592 9.42483 22.745C-2.76068 20.0671 -1.26102 2.11102 10.9147 1C5.14829 8.69528 15.1998 18.6762 23 12.9878Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.765 18.765L23 23M21.7776 11.4239C21.7776 17.181 17.126 21.8478 11.3895 21.8478C5.65163 21.8478 1 17.181 1 11.4252C1 5.66537 5.65162 1 11.3881 1C17.126 1 21.7776 5.66675 21.7776 11.4239Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons.d.ts

@@ -7,6 +7,7 @@ declare module 'webcoreui/icons' {
 	export const github: string
 	export const info: string
 	export const moon: string
+	export const search: string
 	export const sun: string
 	export const warning: string
 }

package/icons.js

@@ -6,5 +6,6 @@ export { default as close } from './icons/close.svg?raw'
 export { default as github } from './icons/github.svg?raw'
 export { default as info } from './icons/info.svg?raw'
 export { default as moon } from './icons/moon.svg?raw'
+export { default as search } from './icons/search.svg?raw'
 export { default as sun } from './icons/sun.svg?raw'
 export { default as warning } from './icons/warning.svg?raw'