webcoreui 0.0.10 → 0.0.12

package/components/Menu/Menu.astro

@@ -0,0 +1,107 @@
+---
+import type { MenuProps } from './menu'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import styles from './menu.module.scss'
+
+interface Props extends MenuProps {}
+
+const {
+    items,
+    logo,
+    centerLogo,
+    className,
+    wrapperClassName
+} = Astro.props
+
+const classes = [
+    styles.menu,
+    className
+]
+
+const containerClasses = [
+    styles.container,
+    wrapperClassName
+]
+
+const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('default')
+---
+
+<header class:list={classes}>
+    <div class:list={containerClasses}>
+        <ConditionalWrapper condition={!!wrapMenu}>
+            <div slot="wrapper" class={styles.wrapper}>
+                children
+            </div>
+            {logo?.url && !centerLogo && (
+                <a href="/">
+                    <img
+                        src={logo.url}
+                        alt={logo.alt || 'Logo'}
+                        width={logo.width}
+                        height={logo.height}
+                    />
+                </a>
+            )}
+
+            {!centerLogo && logo?.html && (
+                <a href="/">
+                    <Fragment set:html={logo.html} />
+                </a>
+            )}
+
+            {items?.length && (
+                <ul>
+                    {items.map(item => (
+                        <li>
+                            <a href={item.url} target={item.target}>
+                                {item.name}
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </ConditionalWrapper>
+
+        {items?.length && (
+            <button class={styles.hamburger} data-id="hamburger">
+                <span class={styles.meat}></span>
+                <span class={styles.meat}></span>
+                <span class={styles.meat}></span>
+                <span class={styles.meat}></span>
+            </button>
+        )}
+
+        {centerLogo && logo?.html && (
+            <a href="/">
+                <Fragment set:html={logo.html} />
+            </a>
+        )}
+
+        {logo?.url && centerLogo && (
+            <a href="/">
+                <img
+                    src={logo.url}
+                    alt={logo.alt || 'Logo'}
+                    width={logo.width}
+                    height={logo.height}
+                />
+            </a>
+        )}
+
+        <slot />
+    </div>
+</header>
+
+<script>
+    document
+        .querySelector('[data-id="hamburger"]')
+        ?.addEventListener('click', event => {
+            const hamburger = event.currentTarget as HTMLDivElement
+            const header = hamburger.parentElement?.parentElement as HTMLHeadElement
+
+            header.dataset.active = header.dataset.active === 'true'
+                ? 'false'
+                : 'true'
+    })
+</script>

package/components/Menu/Menu.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import type { MenuProps } from './menu'
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import styles from './menu.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let items: MenuProps['items'] = []
+    export let logo: MenuProps['logo'] = null
+    export let centerLogo: MenuProps['centerLogo'] = false
+    export let className: MenuProps['className'] = ''
+    export let wrapperClassName: MenuProps['wrapperClassName'] = ''
+
+    const classes = classNames([
+        styles.menu,
+        className
+    ])
+
+    const containerClasses = classNames([
+        styles.container,
+        wrapperClassName
+    ])
+
+    const wrapMenu = (logo?.url || logo?.html) && items?.length && $$slots.default
+
+    let active = false
+
+    const toggleMenu = () => active = !active
+</script>
+
+<header class={classes} data-active={active || null}>
+    <div class={containerClasses}>
+        <ConditionalWrapper condition={!!wrapMenu} class={styles.wrapper}>
+            {#if logo?.url && !centerLogo}
+                <a href="/">
+                    <img
+                        src={logo.url}
+                        alt={logo.alt || 'Logo'}
+                        width={logo.width}
+                        height={logo.height}
+                    />
+                </a>
+            {/if}
+
+            {#if !centerLogo && logo?.html}
+                <a href="/">{@html logo.html}</a>
+            {/if}
+        
+            {#if items?.length}
+                <ul>
+                    {#each items as item}
+                        <li>
+                            <a href={item.url} target={item.target}>
+                                {item.name}
+                            </a>
+                        </li>
+                    {/each}
+                </ul>
+            {/if}
+        </ConditionalWrapper>
+    
+        {#if items?.length}
+            <button class={styles.hamburger} on:click={toggleMenu}>
+                <span class={styles.meat}></span>
+                <span class={styles.meat}></span>
+                <span class={styles.meat}></span>
+                <span class={styles.meat}></span>
+            </button>
+        {/if}
+            
+        {#if centerLogo && logo?.html}
+            <a href="/">{@html logo.html}</a>
+        {/if}
+
+        {#if logo?.url && centerLogo}
+            <a href="/">
+                <img
+                    src={logo.url}
+                    alt={logo.alt || 'Logo'}
+                    width={logo.width}
+                    height={logo.height}
+                />
+            </a>
+        {/if}
+    
+        <slot />
+    </div>
+</header>

package/components/Menu/Menu.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react'
+import type { ReactMenuProps } from './menu'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import styles from './menu.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Menu = ({
+    items,
+    logo,
+    centerLogo,
+    className,
+    wrapperClassName,
+    children
+}: ReactMenuProps) => {
+    const [active, setActive] = useState(false)
+
+    const classes = classNames([
+        styles.menu,
+        className
+    ])
+
+    const containerClasses = classNames([
+        styles.container,
+        wrapperClassName
+    ])
+
+    const wrapMenu = (logo?.url || logo?.html) && items?.length && children
+
+    const toggleMenu = () => setActive(!active)
+
+    return (
+        <header className={classes} data-active={active || null}>
+            <div className={containerClasses}>
+                <ConditionalWrapper
+                    condition={!!wrapMenu}
+                    wrapper={children => (
+                        <div className={styles.wrapper}>
+                            {children}
+                        </div>
+                    )}
+                >
+                    {logo?.url && !centerLogo &&  (
+                        <a href="/">
+                            <img
+                                src={logo.url}
+                                alt={logo.alt || 'Logo'}
+                                width={logo.width}
+                                height={logo.height}
+                            />
+                        </a>
+                    )}
+
+                    {!centerLogo && logo?.html && (
+                        <a
+                            href="/"
+                            dangerouslySetInnerHTML={{ __html: logo.html }}
+                        />
+                    )}
+
+                    {!!items?.length && (
+                        <ul>
+                            {items.map((item, index) => (
+                                <li key={index}>
+                                    <a href={item.url} target={item.target}>
+                                        {item.name}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </ConditionalWrapper>
+                
+                {!!items?.length && (
+                    <button className={styles.hamburger} onClick={toggleMenu}>
+                        <span className={styles.meat}></span>
+                        <span className={styles.meat}></span>
+                        <span className={styles.meat}></span>
+                        <span className={styles.meat}></span>
+                    </button>
+                )}
+
+                {centerLogo && logo?.html && (
+                    <a
+                        href="/"
+                        dangerouslySetInnerHTML={{ __html: logo.html }}
+                    />
+                )}
+
+                {logo?.url && centerLogo && (
+                    <a href="/">
+                        <img
+                            src={logo.url}
+                            alt={logo.alt || 'Logo'}
+                            width={logo.width}
+                            height={logo.height}
+                        />
+                    </a>
+                )}
+
+                {children}
+            </div>
+        </header>
+    )
+}
+
+export default Menu

package/components/Menu/menu.module.scss

@@ -0,0 +1,144 @@
+@import '../../scss/config.scss';
+
+.menu {
+    background: var(--w-color-primary-70);
+    padding: 15px;
+    font-size: 16px;
+    border-bottom: 1px solid var(--w-color-primary-50);
+    position: sticky;
+    top: 0;
+    z-index: 99;
+
+    &[data-active="true"] {
+        .hamburger {
+            box-shadow: 0 0 0 1000px var(--w-color-primary-70);
+
+            .meat:first-child,
+            .meat:last-child {
+                opacity: 0;
+            }
+
+            .meat:first-child {
+                transform: translateY(20px) scale(0);
+            }
+
+            .meat:last-child {
+                transform: translateY(-20px) scale(0);
+            }
+
+            .meat:nth-child(2) {
+                transform: rotate(45deg);
+            }
+
+            .meat:nth-child(3) {
+                transform: rotate(-45deg);
+            }
+        }
+
+        ul {
+            @include Transition(opacity);
+            opacity: 1;
+            z-index: 99;
+            pointer-events: all;
+        }
+    }
+
+    .wrapper {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+    }
+
+    img,
+    svg {
+        display: block;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        display: flex;
+        gap: 20px;
+        position: fixed;
+        top: 20px;
+        left: 20px;
+        flex-direction: column;
+        opacity: 0;
+        pointer-events: none;
+
+        a {
+            @include Transition(color);
+            color: var(--w-color-primary-20);
+    
+            &:hover {
+                color: var(--w-color-primary);
+            }
+        }
+    }
+
+    .hamburger {
+        @include Transition(box-shadow);
+        position: relative;
+        width: 30px;
+        height: 20px;
+        box-shadow: 0 0 0 0 var(--w-color-primary-70);
+        border-radius: 50%;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        z-index: 98;
+        cursor: pointer;
+
+        .meat {
+            @include Transition();
+            width: 100%;
+            position: absolute;
+            height: 2px;
+            background: var(--w-color-primary);
+            display: block;
+            border-radius: 5px;
+
+            &:first-child {
+                top: 0;
+            }
+
+            &:nth-child(2),
+            &:nth-child(3) {
+                top: 50%;
+                transform: translateY(-50%);
+            }
+
+            &:last-child {
+                bottom: 0;
+            }
+        }
+    }
+}
+
+.container {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+@include Media('sm') {
+    .menu {
+        .hamburger {
+            display: none;
+        }
+
+        ul {
+            position: static;
+            opacity: 1;
+            flex-direction: row;
+            pointer-events: all;
+            transform: none;
+        }
+    }
+}

package/components/Menu/menu.ts

@@ -0,0 +1,21 @@
+export type MenuProps = {
+    items?: {
+        url: string
+        name: string
+        target?: string
+    }[]
+    logo?: {
+        url?: string
+        alt?: string
+        width?: number
+        height?: number
+        html?: string
+    } | null
+    centerLogo?: boolean
+    className?: string
+    wrapperClassName?: string
+}
+
+export type ReactMenuProps = {
+    children?: React.ReactNode
+} & MenuProps

package/components/Progress/Progress.astro

@@ -1,40 +1,42 @@
----
-import type { ProgressProps } from './progress'
-import './progress.scss'
-
-interface Props extends ProgressProps {}
-
-const {
-    value,
-    size,
-    label,
-    color,
-    background,
-    square,
-    striped,
-    stripeLight,
-    stripeDark,
-    className
-} = Astro.props
-
-const classes = [
-    'w-progress',
-    size,
-    striped && 'striped',
-    square && 'square',
-    className
-]
-
-const styles = [
-    color && `--w-progress-color: ${color};`,
-    background && `--w-progress-background: ${background};`,
-    stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
-    stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
-].filter(Boolean).join('')
----
-
-<div class:list={classes} style={styles}>
-    <div class="progress" style={`--w-progress-width: ${value}%;`}>
-        {label && `${value}%`}
-    </div>
-</div>
+---
+import type { ProgressProps } from './progress'
+
+import styles from './progress.module.scss'
+import { classNames } from '../../utils/classNames'
+
+interface Props extends ProgressProps {}
+
+const {
+    value,
+    size,
+    label,
+    color,
+    background,
+    square,
+    striped,
+    stripeLight,
+    stripeDark,
+    className
+} = Astro.props
+
+const classes = [
+    styles['w-progress'],
+    size && styles[size],
+    striped && styles.striped,
+    square && styles.square,
+    className
+]
+
+const styleVariables = classNames([
+    color && `--w-progress-color: ${color};`,
+    background && `--w-progress-background: ${background};`,
+    stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
+    stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
+])
+---
+
+<div class:list={classes} style={styleVariables}>
+    <div class={styles.progress} style={`--w-progress-width: ${value}%;`}>
+        {label && `${value}%`}
+    </div>
+</div>

package/components/Progress/Progress.svelte

@@ -1,38 +1,40 @@
-<script lang="ts">
-    import type { ProgressProps } from './progress'
-    import './progress.scss'
-
-    export let value: ProgressProps['value'] = 0
-    export let size: ProgressProps['size'] = null
-    export let label: ProgressProps['label'] = false
-    export let color: ProgressProps['color'] = ''
-    export let background: ProgressProps['background'] = ''
-    export let square: ProgressProps['square'] = false
-    export let striped: ProgressProps['striped'] = false
-    export let stripeLight: ProgressProps['stripeLight'] = ''
-    export let stripeDark: ProgressProps['stripeDark'] = ''
-    export let className: ProgressProps['className'] = ''
-
-    const classes = [
-        'w-progress',
-        size,
-        striped && 'striped',
-        square && 'square',
-        className
-    ].filter(Boolean).join(' ')
-
-    const styles = [
-        color && `--w-progress-color: ${color};`,
-        background && `--w-progress-background: ${background};`,
-        stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
-        stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
-    ].filter(Boolean).join('')
-</script>
-
-<div class={classes} style={styles}>
-    <div class="progress" style={`--w-progress-width: ${value}%;`}>
-        {#if label}
-            {`${value}%`}
-        {/if}
-    </div>
-</div>
+<script lang="ts">
+    import type { ProgressProps } from './progress'
+
+    import styles from './progress.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let value: ProgressProps['value'] = 0
+    export let size: ProgressProps['size'] = null
+    export let label: ProgressProps['label'] = false
+    export let color: ProgressProps['color'] = ''
+    export let background: ProgressProps['background'] = ''
+    export let square: ProgressProps['square'] = false
+    export let striped: ProgressProps['striped'] = false
+    export let stripeLight: ProgressProps['stripeLight'] = ''
+    export let stripeDark: ProgressProps['stripeDark'] = ''
+    export let className: ProgressProps['className'] = ''
+
+    const classes = classNames([
+        styles['w-progress'],
+        size && styles[size],
+        striped && styles.striped,
+        square && styles.square,
+        className
+    ])
+
+    const styleVariables = classNames([
+        color && `--w-progress-color: ${color};`,
+        background && `--w-progress-background: ${background};`,
+        stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
+        stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
+    ])
+</script>
+
+<div class={classes} style={styleVariables || null}>
+    <div class={styles.progress} style={`--w-progress-width: ${value}%;`}>
+        {#if label}
+            {`${value}%`}
+        {/if}
+    </div>
+</div>