webcoreui 0.0.12 → 0.2.0

package/components/Progress/progress.module.scss

@@ -1,35 +1,40 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-progress-color: var(--w-color-primary);
+    --w-progress-background: var(--w-color-primary-50);
+    --w-progress-stripe-light: var(--w-color-primary);
+    --w-progress-stripe-dark: var(--w-color-primary-10);
+}
 
 .w-progress {
-    width: 100%;
-    height: 10px;
-    background: var(--w-progress-background);
-    border-radius: 20px;
-    overflow: hidden;
+    @include size('w100%', h10px);
+    @include border-radius(xl);
+    @include visibility(hidden);
+    @include typography(bold, xs);
+    @include background(var(--w-progress-background));
+
     color: var(--w-progress-background);
-    font-family: Bold;
-    font-size: 10px;
     
     &.medium {
-        height: 15px;
-        font-size: 12px;
+        @include size(h15px);
+        @include typography(sm);
     }
 
     &.large {
-        height: 20px;
-        font-size: 14px;
+        @include size(h20px);
+        @include typography(md);
     }
 
     &.square {
-        border-radius: 2px;
+        @include border-radius(sm);
 
         .progress {
-            border-radius: 2px;
+            @include border-radius(sm);
         }
     }
 
     &.striped {
-
         .progress {
             background-size: 10px 10px;
             background-image: linear-gradient(
@@ -54,13 +59,12 @@
     }
 
     .progress {
-        @include Transition(width);
+        @include transition(width);
+        @include size('h100%');
+        @include border-radius(xl);
+        @include layout(flex, center);
+        @include background(var(--w-progress-color));
+
         width: var(--w-progress-width);
-        height: 100%;
-        background: var(--w-progress-color);
-        border-radius: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
     }
 }

package/components/Radio/radio.module.scss

@@ -1,49 +1,46 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-radio-color: var(--w-color-primary);
+}
 
 .radio {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+    @include layout(flex, column, sm);
 
     &.inline {
-        flex-direction: row;
+        @include layout(row);
     }
 
     label {
-        display: flex;
-        align-items: center;
-        gap: 5px;
+        @include layout(flex, xs);
+
         cursor: pointer;
-        font-size: 16px;
 
         &.disabled {
             cursor: no-drop;
 
             input + span::after {
-                background: var(--w-color-primary-20);
+                @include background(primary-20);
             }
         }
 
         &.col {
-            flex-direction: column;
-            align-items: flex-start;
+            @include layout(column, v-start);
         }
     }
 
     input {
-        display: none;
+        @include visibility(none);
 
         + span::after {
-            @include Transition(transform);
+            @include transition(transform);
+            @include position(absolute, 't50%', 'l50%');
+            @include size(8px);
+            @include border-radius(max);
+            @include background(var(--w-radio-color));
+
             content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
             transform: translate(-50%, -50%) scale(0);
-            width: 8px;
-            height: 8px;
-            border-radius: 100%;
-            background: var(--w-radio-color);
         }
 
         &:checked + span::after {
@@ -51,41 +48,35 @@
         }
 
         &:disabled + span {
-            background-color: var(--w-color-primary-40);
-            border-color: var(--w-color-primary-40);
+            @include background(primary-40);
+            @include border(primary-40);
         }
     }
 
-    a {
-        text-decoration: underline;
-    }
-
     .wrapper {
-        display: flex;
-        align-items: center;
-        gap: 10px;
+        @include layout(flex, sm);
     }
-
+    
     .icon {
+        @include size(16px);
+        @include border-radius(max);
+        @include position(relative);
+        @include spacing(mt-xxs);
+
         display: inline-block;
-        width: 16px;
-        height: 16px;
-        border-radius: 100%;
+        min-width: 16px;
         border: 1px solid var(--w-radio-color);
-        position: relative;
     }
 
     .subtext {
-        margin-left: 25px;
-        font-size: 14px;
-        color: var(--w-color-primary-20);
+        @include spacing(ml-lg);
+        @include typography(md, primary-20);
 
         a {
-            @include Transition(color);
-            color: var(--w-color-primary-20);
+            @include typography(primary-20);
 
             &:hover {
-                color: var(--w-color-primary);
+                @include typography(primary);
             }
         }
     }

package/components/Rating/Rating.astro

@@ -45,11 +45,11 @@ const translatedReviewText = reviewText.replace('{0}', `${reviewCount}`)
 
 <span class:list={classes} style={styleVariables}>
     {score > 0 && (
-        <span class={styles.score}>{Array(score).fill('★').join('')}</span>
+        <span class={styles.score}>{Array(Math.round(score)).fill('★').join('')}</span>
     )}
     {showEmpty && (
         <span class={styles.empty}>
-            {Array(total - score).fill('★').join('')}
+            {Array(total - Math.round(score)).fill('★').join('')}
         </span>
     )}
     {showText && (

package/components/Rating/Rating.svelte

@@ -42,11 +42,11 @@
 
 <span class={classes} style={styleVariables}>
     {#if score}
-        <span class={styles.score}>{Array(score).fill('★').join('')}</span>
+        <span class={styles.score}>{Array(Math.round(score)).fill('★').join('')}</span>
     {/if}
     {#if showEmpty}
     <span class={styles.empty}>
-            {Array((total || 5) - score).fill('★').join('')}
+            {Array((total || 5) - Math.round(score)).fill('★').join('')}
         </span>
     {/if}
 

package/components/Rating/Rating.tsx

@@ -43,12 +43,12 @@ const Rating = ({
         <span className={classes} style={styleVariables}>
             {score > 0 && (
                 <span className={styles.score}>
-                    {Array(score).fill('★').join('')}
+                    {Array(Math.round(score)).fill('★').join('')}
                 </span>
             )}
             {showEmpty && (
                 <span className={styles.empty}>
-                    {Array(total - score).fill('★').join('')}
+                    {Array(total - Math.round(score)).fill('★').join('')}
                 </span>
             )}
             {showText && (

package/components/Rating/rating.module.scss

@@ -1,8 +1,15 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-rating-color: var(--w-color-primary);
+    --w-rating-empty-color: var(--w-color-primary);
+    --w-rating-empty-background: var(--w-color-primary-70);
+    --w-rating-size: 18px;
+}
 
 .rating {
-    display: inline-flex;
-    align-items: center;
+    @include layout(inline-flex, v-center);
+
     color: var(--w-rating-color);
     font-size: var(--w-rating-size);
 
@@ -22,14 +29,14 @@
         color: var(--w-rating-empty-color);
     }
 
-    a {
-        text-decoration: underline;
+    a:hover .text {
+        @include typography(primary);
     }
     
     .text {
-        font-size: 16px;
-        color: var(--w-color-primary-20);
-        margin-left: 5px;
+        @include transition(color);
+        @include typography(default, primary-20);
+        @include spacing(ml-xs);
 
         &.m {
             margin-right: 5px;

package/components/Slider/Slider.astro

@@ -0,0 +1,44 @@
+---
+import type { SliderProps } from './slider'
+
+import styles from './slider.module.scss'
+import { classNames } from '../../utils/classNames'
+
+interface Props extends SliderProps {}
+
+const {
+    min,
+    max,
+    value,
+    step,
+    disabled,
+    color,
+    background,
+    thumb,
+    id,
+    className
+} = Astro.props
+
+const classes = [
+    styles.slider,
+    className
+]
+
+const styleVariables = classNames([
+    color && `--w-slider-color: ${color};`,
+    background && `--w-slider-background: ${background};`,
+    thumb && `--w-slider-thumb: ${thumb};`
+])
+---
+
+<input
+    type="range"
+    min={min}
+    max={max}
+    value={value || min}
+    step={step}
+    disabled={disabled}
+    class:list={classes}
+    id={id}
+    style={styleVariables}
+/>

package/components/Slider/Slider.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import type { SvelteSliderProps } from './slider'
+
+    import styles from './slider.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let min: SvelteSliderProps['min'] = 0
+    export let max: SvelteSliderProps['max'] = 100
+    export let value: SvelteSliderProps['value'] = 0
+    export let step: SvelteSliderProps['step'] = 1
+    export let disabled: SvelteSliderProps['disabled'] = false
+    export let color: SvelteSliderProps['color'] = ''
+    export let background: SvelteSliderProps['background'] = ''
+    export let thumb: SvelteSliderProps['thumb'] = ''
+    export let id: SvelteSliderProps['id'] = ''
+    export let className: SvelteSliderProps['className'] = ''
+    export let onChange: SvelteSliderProps['onChange'] = () => {}
+
+    const classes = classNames([
+        styles.slider,
+        className
+    ])
+
+    const styleVariables = classNames([
+        color && `--w-slider-color: ${color};`,
+        background && `--w-slider-background: ${background};`,
+        thumb && `--w-slider-thumb: ${thumb};`
+    ])
+</script>
+
+<input
+    type="range"
+    min={min}
+    max={max}
+    value={value || min}
+    step={step}
+    disabled={disabled}
+    class={classes}
+    id={id || null}
+    style={styleVariables || null}
+    on:change={onChange}
+/>

package/components/Slider/Slider.tsx

@@ -0,0 +1,48 @@
+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

package/components/Slider/slider.module.scss

@@ -0,0 +1,68 @@
+@import '../../scss/config.scss';
+
+body {
+    --w-slider-background: var(--w-color-primary-50);
+    --w-slider-color: var(--w-color-primary);
+    --w-slider-thumb: var(--w-color-primary-50);
+}
+
+.slider {
+    @include border-radius(xl);
+    @include size('w100%');
+    @include visibility(hidden);
+    @include size(h10px);
+    @include spacing(m0);
+
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+
+    &[disabled]::-webkit-slider-runnable-track {
+        @include background(primary-50);
+    }
+    
+    &[disabled]::-moz-range-track {
+        @include background(primary-50);
+    }
+
+    &[disabled]::-webkit-slider-thumb {
+        @include background(primary-50);
+        @include border(primary-30);
+        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
+    }
+
+    &[disabled]::-moz-range-thumb {
+        @include background(primary-50);
+        @include border(primary-30);
+        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
+    }
+}
+
+.slider::-webkit-slider-runnable-track {
+    @include background(var(--w-slider-background));
+}
+
+.slider::-moz-range-track {
+    @include background(var(--w-slider-background));
+    @include size(h10px);
+}
+
+.slider::-webkit-slider-thumb {
+    @include background(var(--w-slider-thumb));
+    @include size(10px);
+    @include border-radius(max);
+    @include border(var(--w-slider-color));
+
+    -webkit-appearance: none;
+    appearance: none;
+    box-shadow: -995px 0 0 990px var(--w-slider-color);
+}
+
+.slider::-moz-range-thumb {
+    @include background(var(--w-slider-thumb));
+    @include size(9px);
+    @include border-radius(max);
+    @include border(var(--w-slider-color));
+
+    box-shadow: -995px 0 0 990px var(--w-slider-color);
+}

package/components/Slider/slider.ts

@@ -0,0 +1,20 @@
+export type SliderProps = {
+    min: number
+    max: number
+    value?: number
+    step?: number
+    disabled?: boolean
+    color?: string
+    background?: string
+    thumb?: string
+    id?: string
+    className?: string
+}
+
+export type SvelteSliderProps = {
+    onChange?: (e: any) => any
+} & SliderProps
+
+export type ReactSliderProps = {
+    onChange?: (e: any) => any
+} & SliderProps

package/components/Spinner/spinner.module.scss

@@ -1,7 +1,16 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-spinner-color: var(--w-color-primary);
+    --w-spinner-width: 2px;
+    --w-spinner-speed: 2s;
+    --w-spinner-size: 30px;
+    --w-spinner-dash: 8;
+}
 
 .spinner {
-    margin: 0px auto;
+    @include spacing(auto-none);
+
     width: var(--w-spinner-size);
     height: var(--w-spinner-size);
     animation: rotate var(--w-spinner-speed) linear infinite;

package/components/Switch/switch.module.scss

@@ -1,21 +1,24 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-switch-off-color: var(--w-color-primary-50);
+    --w-switch-on-color: var(--w-color-primary);
+}
 
 .switch {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
+    @include layout(inline-flex, v-center, sm);
     cursor: pointer;
 
     &.reverse {
-        flex-direction: row-reverse;
+        @include layout(row-reverse);
     }
 
     &.disabled .toggle {
+        @include background(primary-40);
         cursor: no-drop;
-        background: var(--w-color-primary-40);
 
         &::before {
-            background: var(--w-color-primary-50);
+            @include background(primary-50);
         }
     }
 
@@ -25,33 +28,31 @@
         }
 
         .toggle {
-            width: 40px;
-            height: 20px;
+            @include size(w40px, h20px);
     
             &::before {
-                height: 14px;
-                width: 14px;
+                @include size(14px);
             }
         }
 
         .label {
-            font-size: 14px;
+            @include typography(md);
         }
     }
 
     &.square .toggle {
-        border-radius: 5px;
+        @include border-radius(md);
 
         &::before {
-            border-radius: 5px;
+            @include border-radius(md);
         }
     }
 
     input {
-        display: none;
+        @include visibility(none);
 
         &:checked + span {
-            background-color: var(--w-switch-on-color);
+            @include background(var(--w-switch-on-color));
     
             &::before {
                 transform: translateX(30px);
@@ -60,22 +61,19 @@
     }
 
     .toggle {
-        @include Transition(background);
-        position: relative;
-        width: 60px;
-        height: 30px;
-        background: var(--w-switch-off-color);
-        border-radius: 30px;
+        @include transition(background);
+        @include position(relative);
+        @include size(w60px, h30px);
+        @include border-radius(xl);
+        @include background(var(--w-switch-off-color));
 
         &::before {
-            content: "";
-            position: absolute;
-            height: 24px;
-            width: 24px;
-            left: 3px;
-            bottom: 3px;
-            background: var(--w-color-primary-70);
-            border-radius: 50%;
+            @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

@@ -12,6 +12,7 @@ const {
     striped,
     offsetStripe,
     compact,
+    maxHeight,
     className
 } = Astro.props
 
@@ -21,11 +22,15 @@ const classes = [
     striped && styles[`striped-${striped}s`],
     offsetStripe && styles.offset,
     compact && styles.compact,
+    maxHeight && styles.scroll,
     className
 ]
 ---
 
-<div class:list={classes}>
+<div
+    class:list={classes}
+    style={maxHeight ? `max-height:${maxHeight}` : undefined}
+>
     <table>
         {headings?.length && (
             <thead>

package/components/Table/Table.svelte

@@ -11,6 +11,7 @@
     export let striped: TableProps['striped'] = null
     export let offsetStripe: TableProps['offsetStripe'] = false
     export let compact: TableProps['compact'] = false
+    export let maxHeight: TableProps['maxHeight'] = 0
     export let className: TableProps['className'] = ''
 
     const classes = classNames([
@@ -19,11 +20,12 @@
         striped && styles[`striped-${striped}s`],
         offsetStripe && styles.offset,
         compact && styles.compact,
+        maxHeight && styles.scroll,
         className
     ])
 </script>
 
-<div class={classes}>
+<div class={classes} style={maxHeight ? `max-height:${maxHeight}` : null}>
     <table>
         {#if headings?.length}
             <thead>