webcoreui 0.0.11 → 0.0.12

package/components/Input/{input.scss → input.module.scss}

@@ -1,83 +1,87 @@
-@import '../../scss/config.scss';
-
-.w-input {
-    border-radius: 2px;
-    padding: 5px 10px;
-    border: 1px solid #252525;
-    background: transparent;
-    font-family: Regular;
-    color: #FFF;
-    line-height: 20px;
-    width: 100%;
-    color-scheme: dark;
-
-    &[disabled] {
-        cursor: no-drop;
-        color: #555;
-    }
-
-    &::file-selector-button {
-        background: transparent;
-        border: 0;
-        color: #FFF;
-    }
-
-    &[type="color"] {
-        padding: 0;
-    }
-
-    &.info {
-        border-color: #48dbfb;
-    }
-
-    &.success {
-        border-color: #1dd1a1;
-    }
-
-    &.warning {
-        border-color: #f7aa61;
-    }
-
-    &.alert {
-        border-color: #ee5253;
-    }
-
-    &.fill {
-        background: #252525;
-    }
-}
-
-.w-input-label {
-    display: flex;
-    flex-direction: column;
-
-    .label {
-        font-size: 16px;
-        color: #BBB;
-        margin-bottom: 5px;
-    }
-
-    .input-wrapper {
-        display: flex;
-        gap: 10px;
-        align-items: center;
-        position: relative;
-
-        input {
-            padding-left: 40px;
-        }
-
-        svg {
-            position: absolute;
-            left: 10px;
-            width: 20px;
-            height: 20px;
-        }
-    }
-
-    .subtext {
-        font-size: 14px;
-        color: #555;
-        margin-top: 5px;
-    }
-}
+@import '../../scss/config.scss';
+
+.input {
+    border-radius: 2px;
+    padding: 5px 10px;
+    border: 1px solid var(--w-color-primary-50);
+    background: transparent;
+    font-family: Regular;
+    color: var(--w-color-primary);
+    line-height: 20px;
+    width: 100%;
+    color-scheme: var(--w-color-scheme);
+
+    &[disabled] {
+        cursor: no-drop;
+        color: var(--w-color-primary-30);
+    }
+
+    &::file-selector-button {
+        background: transparent;
+        border: 0;
+        color: var(--w-color-primary);
+    }
+
+    &::placeholder {
+        color: var(--w-color-primary-30);
+    }
+
+    &[type="color"] {
+        padding: 0;
+    }
+
+    &.info {
+        border-color: #48dbfb;
+    }
+
+    &.success {
+        border-color: #1dd1a1;
+    }
+
+    &.warning {
+        border-color: #f7aa61;
+    }
+
+    &.alert {
+        border-color: #ee5253;
+    }
+
+    &.fill {
+        background: var(--w-color-primary-50);
+    }
+}
+
+.input-label {
+    display: flex;
+    flex-direction: column;
+
+    .label {
+        font-size: 16px;
+        color: var(--w-color-primary-20);
+        margin-bottom: 5px;
+    }
+
+    .wrapper {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+        position: relative;
+
+        input {
+            padding-left: 40px;
+        }
+
+        svg {
+            position: absolute;
+            left: 10px;
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    .subtext {
+        font-size: 14px;
+        color: var(--w-color-primary-30);
+        margin-top: 5px;
+    }
+}

package/components/Input/input.ts

@@ -17,6 +17,7 @@ export type InputProps = {
         | 'success'
         | 'warning'
         | 'alert'
+        | 'fill'
         | null
     value?: string | number
     name?: string
@@ -24,7 +25,6 @@ export type InputProps = {
     label?: string
     disabled?: boolean
     subText?: string
-    fill?: boolean
     maxLength?: number
     min?: number
     max?: number
@@ -38,7 +38,13 @@ export type InputProps = {
     [key: string]: any
 }
 
+export type SvelteInputProps = {
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
+} & InputProps
+
 export type ReactInputProps = {
-    icon?: string
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
     children?: React.ReactNode
 } & InputProps

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