webcoreui 0.2.0 → 0.4.0

package/components/Sheet/sheet.module.scss

@@ -0,0 +1,68 @@
+@import '../../scss/config.scss';
+
+.sheet {
+    @include position(t0, 'r-100%', lauto);
+    @include visibility(1);
+    @include border-radius(none);
+    @include size(100%);
+    @include border(0);
+    @include border(left, primary-50);
+
+    transform: none;
+
+    &[data-show="true"] {
+        @include position(r0);
+
+        transform: none;
+    }
+
+    &.left {
+        @include position('l-100%', rauto);
+        @include border(0);
+        @include border(right, primary-50);
+
+        &[data-show="true"] {
+            @include position(l0);
+        }
+    }
+
+    &.top {
+        @include position(t0, l0);
+        @include size(hauto);
+        @include border(0);
+        @include border(bottom, primary-50);
+
+        transform: translateY(-100%);
+        min-width: 100%;
+
+        &[data-show="true"] {
+            transform: translateY(0);
+        }
+    }
+
+    &.bottom {
+        @include position(b0, l0);
+        @include size(hauto);
+        @include border(0);
+        @include border(top, primary-50);
+
+        transform: translateY(100%);
+        top: auto;
+        min-width: 100%;
+
+        &[data-show="true"] {
+            transform: translateY(0);
+        }
+    }
+}
+
+@include media(xs) {
+    .sheet {
+        @include position(r-500px);
+        @include size(w500px);
+
+        &.left {
+            @include position(l-500px);
+        }
+    }
+}

package/components/Sheet/sheet.ts

@@ -0,0 +1,10 @@
+import type { ModalProps, ReactModalProps } from '../Modal/modal'
+
+export type SheetProps = {
+    position?: 'left'
+        | 'top'
+        | 'bottom'
+        | null
+} & ModalProps
+
+export type ReactSheetProps = SheetProps & ReactModalProps

package/components/Slider/Slider.astro

@@ -1,9 +1,10 @@
 ---
 import type { SliderProps } from './slider'
 
-import styles from './slider.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './slider.module.scss'
+
 interface Props extends SliderProps {}
 
 const {

package/components/Slider/Slider.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { SvelteSliderProps } from './slider'
 
-    import styles from './slider.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './slider.module.scss'
+
     export let min: SvelteSliderProps['min'] = 0
     export let max: SvelteSliderProps['max'] = 100
     export let value: SvelteSliderProps['value'] = 0

package/components/Slider/Slider.tsx

@@ -1,48 +1,49 @@
-import React from 'react'
-import type { ReactSliderProps } from './slider'
-
-import styles from './slider.module.scss'
-import { classNames } from '../../utils/classNames'
-
-const Slider = ({
-    min,
-    max,
-    value,
-    step,
-    disabled,
-    color,
-    background,
-    thumb,
-    id,
-    className,
-    onChange
-}: ReactSliderProps) => {
-    const classes = classNames([
-        styles.slider,
-        className
-    ])
-
-    const styleVariables = {
-        ...(color && { '--w-slider-color': color }),
-        ...(background && { '--w-slider-background': background }),
-        ...(thumb && { '--w-slider-thumb': thumb })
-    } as React.CSSProperties
-
-    return (
-        <input
-            type="range"
-            min={min}
-            max={max}
-            defaultValue={value || min}
-            step={step}
-            disabled={disabled}
-            className={classes}
-            id={id}
-            style={styleVariables}
-            onChange={onChange}
-        />
-
-    )
-}
-
-export default Slider
+import React from 'react'
+import type { ReactSliderProps } from './slider'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './slider.module.scss'
+
+const Slider = ({
+    min,
+    max,
+    value,
+    step,
+    disabled,
+    color,
+    background,
+    thumb,
+    id,
+    className,
+    onChange
+}: ReactSliderProps) => {
+    const classes = classNames([
+        styles.slider,
+        className
+    ])
+
+    const styleVariables = {
+        ...(color && { '--w-slider-color': color }),
+        ...(background && { '--w-slider-background': background }),
+        ...(thumb && { '--w-slider-thumb': thumb })
+    } as React.CSSProperties
+
+    return (
+        <input
+            type="range"
+            min={min}
+            max={max}
+            defaultValue={value || min}
+            step={step}
+            disabled={disabled}
+            className={classes}
+            id={id}
+            style={styleVariables}
+            onChange={onChange}
+        />
+
+    )
+}
+
+export default Slider

package/components/Spinner/Spinner.astro

@@ -1,9 +1,10 @@
 ---
 import type { SpinnerProps } from './spinner'
 
-import styles from './spinner.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './spinner.module.scss'
+
 interface Props extends SpinnerProps {}
 
 const {
@@ -11,7 +12,7 @@ const {
     width,
     speed,
     size,
-    dashArray,
+    dashArray
 } = Astro.props
 
 const classes = [
@@ -24,7 +25,7 @@ const styleVariables = classNames([
     width && `--w-spinner-width: ${width}px;`,
     speed && `--w-spinner-speed: ${speed}s;`,
     size && `--w-spinner-size: ${size}px;`,
-    dashArray && `--w-spinner-dash: ${dashArray}`,
+    dashArray && `--w-spinner-dash: ${dashArray}`
 ])
 ---
 

package/components/Spinner/Spinner.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { SpinnerProps } from './spinner'
 
-    import styles from './spinner.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './spinner.module.scss'
+
     export let color: SpinnerProps['color'] = ''
     export let width: SpinnerProps['width'] = 0
     export let speed: SpinnerProps['speed'] = 0
@@ -20,7 +21,7 @@
         width && `--w-spinner-width: ${width}px;`,
         speed && `--w-spinner-speed: ${speed}s;`,
         size && `--w-spinner-size: ${size}px;`,
-        dashArray && `--w-spinner-dash: ${dashArray}`,
+        dashArray && `--w-spinner-dash: ${dashArray}`
     ])
 </script>
 

package/components/Spinner/Spinner.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import type { SpinnerProps } from './spinner'
 
-import styles from './spinner.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './spinner.module.scss'
+
 const Spinner = ({
     color,
     width,
@@ -15,13 +16,13 @@ const Spinner = ({
         styles.spinner,
         dashArray && styles.dashed
     ])
-    
+
     const stylesVariable = {
         ...(color && { '--w-spinner-color': color }),
         ...(width && { '--w-spinner-width': `${width}px;` }),
         ...(speed && { '--w-spinner-speed': `${speed}s;` }),
         ...(size && { '--w-spinner-size': `${size}px;` }),
-        ...(dashArray && { '--w-spinner-dash': dashArray }),
+        ...(dashArray && { '--w-spinner-dash': dashArray })
     } as React.CSSProperties
 
     return (

package/components/Switch/Switch.astro

@@ -1,9 +1,10 @@
 ---
 import type { SwitchProps } from './switch'
 
-import styles from './switch.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './switch.module.scss'
+
 interface Props extends SwitchProps {}
 
 const {

package/components/Switch/Switch.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { SvelteSwitchProps } from './switch'
 
-    import styles from './switch.module.scss'
     import { classNames } from '../../utils/classNames'
-    
+
+    import styles from './switch.module.scss'
+
     export let label: SvelteSwitchProps['label'] = ''
     export let toggled: SvelteSwitchProps['toggled'] = false
     export let offColor: SvelteSwitchProps['offColor'] = ''
@@ -14,7 +15,7 @@
     export let disabled: SvelteSwitchProps['disabled'] = false
     export let className: SvelteSwitchProps['className'] = ''
     export let onClick: SvelteSwitchProps['onClick'] = () => {}
-    
+
     const classes = classNames([
         styles.switch,
         reverse && styles.reverse,
@@ -23,7 +24,7 @@
         disabled && styles.disabled,
         className
     ])
-    
+
     const styleVariables = classNames([
         offColor && `--w-switch-off-color: ${offColor};`,
         onColor && `--w-switch-on-color: ${onColor};`

package/components/Switch/Switch.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import type { ReactSwitchProps } from './switch'
 
-import styles from './switch.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './switch.module.scss'
+
 const Switch = ({
     label,
     toggled,
@@ -42,7 +43,6 @@ const Switch = ({
             {label && <span className={styles.label}>{label}</span>}
         </label>
     )
-    
 }
 
 export default Switch

package/components/Switch/switch.module.scss

@@ -68,13 +68,13 @@ body {
         @include background(var(--w-switch-off-color));
 
         &::before {
+            @include transition(transform);
             @include position(absolute, l3px, b3px);
             @include size(24px);
             @include border-radius(max);
             @include background(primary-70);
 
             content: '';
-            transition: 0.3s;
         }
     }
 }

package/components/Table/Table.astro

@@ -1,5 +1,6 @@
 ---
 import type { TableProps } from './table'
+
 import styles from './table.module.scss'
 
 interface Props extends TableProps {}

package/components/Table/Table.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { TableProps } from './table'
 
-    import styles from './table.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './table.module.scss'
+
     export let headings: TableProps['headings'] = []
     export let footer: TableProps['footer'] = []
     export let data: TableProps['data'] = []

package/components/Table/Table.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import type { TableProps } from './table'
 
-import styles from './table.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './table.module.scss'
+
 const Table = ({
     headings,
     footer,

package/components/Tabs/Tabs.astro

@@ -1,5 +1,6 @@
 ---
 import type { TabsProps } from './tabs'
+
 import styles from './tabs.module.scss'
 
 interface Props extends TabsProps {}
@@ -59,7 +60,7 @@ const classes = [
                         } else {
                             element.dataset.active = false
                         }
-                })
+                    })
 
                 const tabs = target.parentElement?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>
 

package/components/Tabs/Tabs.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { TabsProps } from './tabs'
 
-    import styles from './tabs.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './tabs.module.scss'
+
     export let items: TabsProps['items'] = []
     export let theme: TabsProps['theme'] = null
     export let vertical: TabsProps['vertical'] = false

package/components/Tabs/Tabs.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useRef } from 'react'
+import React, { useRef,useState } from 'react'
 import type { ReactTabsProps } from './tabs'
 
-import styles from './tabs.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './tabs.module.scss'
+
 const Tabs = ({
     items,
     theme,
@@ -33,7 +34,7 @@ const Tabs = ({
                 item.dataset.active = true
             }
         })
-    
+
         setActive(tab)
     }
 

package/components/Textarea/Textarea.astro

@@ -0,0 +1,45 @@
+---
+import type { TextareaProps } from './textarea'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import styles from './textarea.module.scss'
+
+interface Props extends TextareaProps {}
+
+const {
+    label,
+    placeholder,
+    subText,
+    value = '',
+    disabled,
+    className
+} = Astro.props
+
+const classes = [
+    styles.textarea,
+    className
+]
+
+const useLabel = !!(label || subText)
+---
+
+<ConditionalWrapper condition={useLabel}>
+    <label slot="wrapper" class={styles['label-wrapper']}>
+        {label && (
+            <div class={styles.label}>{label}</div>
+        )}
+        children
+        {subText && (
+            <div class={styles.subtext}>
+                <Fragment set:html={subText} />
+            </div>
+        )}
+    </label>
+
+    <textarea
+        placeholder={placeholder}
+        disabled={disabled}
+        class:list={classes}
+    >{value}</textarea>
+</ConditionalWrapper>

package/components/Textarea/Textarea.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import type { SvelteTextareaProps } from './textarea'
+
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './textarea.module.scss'
+
+    export let label: SvelteTextareaProps['label'] = ''
+    export let placeholder: SvelteTextareaProps['placeholder'] = ''
+    export let subText: SvelteTextareaProps['subText'] = ''
+    export let value: SvelteTextareaProps['value'] = ''
+    export let disabled: SvelteTextareaProps['disabled'] = false
+    export let className: SvelteTextareaProps['className'] = ''
+    export let onChange: SvelteTextareaProps['onChange'] = () => {}
+    export let onKeyUp: SvelteTextareaProps['onKeyUp'] = () => {}
+
+    const classes = classNames([
+        styles.textarea,
+        className
+    ])
+
+    const useLabel = !!(label || subText)
+</script>
+
+<ConditionalWrapper
+    condition={useLabel}
+    element="label"
+    class={styles['label-wrapper']}
+>
+    {#if label}
+        <div class={styles.label}>{label}</div>
+    {/if}
+    <textarea
+        placeholder={placeholder}
+        disabled={disabled}
+        class={classes}
+        on:change={onChange}
+        on:keyup={onKeyUp}
+    >{value}</textarea>
+    {#if subText}
+        <div class={styles.subtext}>
+            {@html subText}
+        </div>
+    {/if}
+</ConditionalWrapper>

package/components/Textarea/Textarea.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import type { ReactTextareaProps } from './textarea'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './textarea.module.scss'
+
+const Textarea = ({
+    label,
+    placeholder,
+    subText,
+    value = '',
+    disabled,
+    className,
+    ...rest
+}: ReactTextareaProps) => {
+    const classes = classNames([
+        styles.textarea,
+        className
+    ])
+
+    const useLabel = !!(label || subText)
+
+    return (
+        <ConditionalWrapper condition={useLabel} wrapper={children => (
+            <label className={styles['label-wrapper']}>
+                {label && (
+                    <div className={styles.label}>{label}</div>
+                )}
+                {children}
+                {subText && (
+                    <div
+                        className={styles.subtext}
+                        dangerouslySetInnerHTML={{ __html: subText }}
+                    />
+                )}
+            </label>
+        )}>
+            <textarea
+                placeholder={placeholder}
+                disabled={disabled}
+                className={classes}
+                defaultValue={value}
+                {...rest}
+            />
+        </ConditionalWrapper>
+    )
+}
+
+export default Textarea

package/components/Textarea/textarea.module.scss

@@ -0,0 +1,36 @@
+@import '../../scss/config.scss';
+
+.textarea {
+    @include size('w100%');
+    @include background(transparent);
+    @include border-radius(sm);
+    @include border(primary-50);
+    @include spacing(p-sm);
+    @include typography(regular, primary, hlg);
+
+    min-height: 50px;
+    resize: vertical;
+
+    &[disabled] {
+        @include typography(primary-30);
+        cursor: no-drop;
+    }
+
+    &::placeholder {
+        @include typography(primary-30);
+    }
+}
+
+.label-wrapper {
+    @include layout(flex, column);
+
+    .label {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
+
+    .subtext {
+        @include typography(md, primary-30);
+        @include spacing(mt-xs);
+    }
+}

package/components/Textarea/textarea.ts

@@ -0,0 +1,18 @@
+export type TextareaProps = {
+    label?: string
+    placeholder?: string
+    subText?: string
+    value?: string
+    disabled?: boolean
+    className?: string
+}
+
+export type SvelteTextareaProps = {
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
+} & TextareaProps
+
+export type ReactTextareaProps = {
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
+} & TextareaProps