webcoreui 1.2.0 → 1.3.0

package/components/Counter/counter.module.scss

@@ -0,0 +1,155 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-counter-width: 10ch;
+}
+
+.counter {
+    @include layout(inline-flex);
+    @include border(primary-50);
+    @include border-radius();
+
+    &.rounded {
+        @include border-radius(xl);
+    }
+
+    &.compact button {
+        @include border(0);
+    }
+
+    &.buttons {
+        button {
+            @include border(0);
+
+            &:first-child {
+                @include border(right, primary-50);
+            }
+    
+            &:last-child {
+                @include border(left, primary-50);
+            }
+        }
+
+        &.info button {
+            border-color: var(--w-color-info);
+        }
+
+        &.success button {
+            border-color: var(--w-color-success);
+        }
+
+        &.warning button {
+            border-color: var(--w-color-warning);
+        }
+
+        &.alert button {
+            border-color: var(--w-color-alert);
+        }
+    }
+
+    &:not(.buttons) button {
+        @include border-radius();
+    }
+
+    &.separated {
+        @include layout(xs);
+        @include border(0);
+
+        input {
+            @include border(primary-50);
+        }
+
+        &.info input,
+        &.info button {
+            border-color: var(--w-color-info);
+        }
+
+        &.success input,
+        &.success button {
+            border-color: var(--w-color-success);
+        }
+
+        &.warning input,
+        &.warning button {
+            border-color: var(--w-color-warning);
+        }
+
+        &.alert input,
+        &.alert button {
+            border-color: var(--w-color-alert);
+        }
+    }
+
+    &.info:not(.separated) {
+        border-color: var(--w-color-info);
+    }
+
+    &.success:not(.separated) {
+        border-color: var(--w-color-success);
+    }
+
+    &.warning:not(.separated) {
+        border-color: var(--w-color-warning);
+    }
+
+    &.alert:not(.separated) {
+        border-color: var(--w-color-alert);
+    }
+
+    &.info button svg {
+        @include typography(info);
+    }
+
+    &.success button svg {
+        @include typography(success);
+    }
+
+    &.warning button svg {
+        @include typography(warning);
+    }
+
+    &.alert button svg {
+        @include typography(alert);
+    }
+
+    button {
+        @include background(transparent);
+        @include border(primary-50);
+        @include typography(primary);
+        @include spacing(p-xs);
+
+        cursor: pointer;
+
+        &[disabled] {
+            @include typography(primary-50);
+
+            cursor: default;
+        }
+
+        svg {
+            @include size(w18px, 'h100%');
+        }
+    }
+
+    input {
+        @include background(transparent);
+        @include border(0);
+        @include border-radius();
+        @include typography(primary, center);
+        @include spacing(p-xs);
+
+        flex: 1;
+        width: var(--w-counter-width);
+        appearance: none;
+        -moz-appearance: textfield;
+
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+            appearance: none;
+        }
+
+        &[disabled] {
+            @include typography(primary-50);
+        }
+    }
+}

package/components/Counter/counter.ts

@@ -0,0 +1,21 @@
+import type { ButtonProps } from '../Button/button'
+import type { IconProps } from '../Icon/icon'
+
+export type CounterProps = {
+    type?: 'compact' | 'buttons' | 'separated'
+    theme?: ButtonProps['theme']
+    rounded?: boolean
+    minIcon?: IconProps['type'] | string
+    maxIcon?: IconProps['type'] | string
+    width?: string
+    className?: string
+    [key: string]: any
+}
+
+export type SvelteCounterProps = {
+    onChange?: (value: number) => void
+} & CounterProps
+
+export type ReactCounterProps = {
+    onChange?: (value: number) => void
+} & CounterProps

package/components/DataTable/DataTable.tsx

@@ -18,7 +18,6 @@ import styles from './datatable.module.scss'
 
 import type { ListEventType } from '../List/list'
 
-// eslint-disable-next-line complexity
 const DataTable = ({
     headings,
     filterPlaceholder = 'Filter entries',
@@ -38,6 +37,7 @@ const DataTable = ({
     id,
     onFilter,
     children
+// eslint-disable-next-line complexity
 }: ReactDataTableProps) => {
     const [filteredData, setFilteredData] = useState<any>(data)
     const [toggledData, setToggledData] = useState(filteredData)

package/components/Icon/map.ts

@@ -11,6 +11,7 @@ import Copy from '../../icons/copy.svg?raw'
 import Github from '../../icons/github.svg?raw'
 import Home from '../../icons/home.svg?raw'
 import Info from '../../icons/info.svg?raw'
+import Minus from '../../icons/minus.svg?raw'
 import Moon from '../../icons/moon.svg?raw'
 import Order from '../../icons/order.svg?raw'
 import Plus from '../../icons/plus.svg?raw'
@@ -32,6 +33,7 @@ const iconMap = {
     'github': Github,
     'home': Home,
     'info': Info,
+    'minus': Minus,
     'moon': Moon,
     'order': Order,
     'plus': Plus,

package/components/List/List.astro

@@ -19,17 +19,20 @@ const {
     id,
     className,
     wrapperClassName,
+    secondary,
     itemGroups
 } = Astro.props
 
 const classes = [
     styles.list,
+    (secondary && !showSearchBar) && styles.secondary,
     !showSearchBar && styles.container,
     className
 ]
 
 const wrapperClasses = [
     styles.container,
+    secondary && styles.secondary,
     wrapperClassName
 ]
 ---

package/components/List/List.svelte

@@ -19,6 +19,7 @@
         id,
         className,
         wrapperClassName,
+        secondary,
         itemGroups = $bindable([]),
         onSelect
     }: SvelteListProps = $props()
@@ -28,12 +29,14 @@
 
     const classes = classNames([
         styles.list,
+        (secondary && !showSearchBar) && styles.secondary,
         !showSearchBar && styles.container,
         className
     ])
 
     const wrapperClasses = classNames([
         styles.container,
+        secondary && styles.secondary,
         wrapperClassName
     ])
 
@@ -81,15 +84,15 @@
     class={wrapperClasses}
 >
     {#if showSearchBar}
-        <Input
-            type="search"
-            placeholder={searchBarPlaceholder}
-            onInput={search}
-        >
-            {#if showSearchBarIcon}
-                {@html searchIcon}
-            {/if}
-        </Input>
+        {#if showSearchBarIcon}
+            <Input type="search" placeholder={searchBarPlaceholder} onInput={search}>
+                {#if showSearchBarIcon}
+                    {@html searchIcon}
+                {/if}
+            </Input>
+        {:else}
+            <Input type="search" placeholder={searchBarPlaceholder} onInput={search} />
+        {/if}
     {/if}
     <ul
         class={classes}

package/components/List/List.tsx

@@ -19,6 +19,7 @@ const List = ({
     id,
     className,
     wrapperClassName,
+    secondary,
     itemGroups,
     onSelect
 }: ReactListProps) => {
@@ -28,12 +29,14 @@ const List = ({
 
     const classes = classNames([
         styles.list,
+        (secondary && !showSearchBar) && styles.secondary,
         !showSearchBar && styles.container,
         className
     ])
 
     const wrapperClasses = classNames([
         styles.container,
+        secondary && styles.secondary,
         wrapperClassName
     ])
 

package/components/List/list.module.scss

@@ -85,6 +85,11 @@
 .container {
     @include border-radius(md);
     @include border(primary-50);
+    @include background(primary-70);
+
+    &.secondary {
+        @include background(primary-60);
+    }
 
     input {
         @include border(top, 0);

package/components/List/list.ts

@@ -1,39 +1,40 @@
-import type { ButtonProps } from '../Button/button'
-
-export type ListEventType = {
-    value: string
-    name: string
-    list: HTMLUListElement
-}
-
-export type ListProps = {
-    showSearchBar?: boolean
-    showSearchBarIcon?: boolean
-    searchBarPlaceholder?: string
-    noResultsLabel?: string
-    maxHeight?: string
-    id?: string
-    className?: string
-    wrapperClassName?: string
-    itemGroups: {
-        title?: string
-        items: {
-            name: string
-            value?: string
-            href?: string
-            target?: ButtonProps['target']
-            selected?: boolean
-            disabled?: boolean
-            icon?: string
-            subText?: string
-        }[]
-    }[]
-}
-
-export type SvelteListProps = {
-    onSelect?: (event: ListEventType) => void
-} & ListProps
-
-export type ReactListProps = {
-    onSelect?: (event: ListEventType) => void
-} & ListProps
+import type { ButtonProps } from '../Button/button'
+
+export type ListEventType = {
+    value: string
+    name: string
+    list: HTMLUListElement
+}
+
+export type ListProps = {
+    showSearchBar?: boolean
+    showSearchBarIcon?: boolean
+    searchBarPlaceholder?: string
+    noResultsLabel?: string
+    maxHeight?: string
+    id?: string
+    className?: string
+    wrapperClassName?: string
+    secondary?: boolean
+    itemGroups: {
+        title?: string
+        items: {
+            name: string
+            value?: string
+            href?: string
+            target?: ButtonProps['target']
+            selected?: boolean
+            disabled?: boolean
+            icon?: string
+            subText?: string
+        }[]
+    }[]
+}
+
+export type SvelteListProps = {
+    onSelect?: (event: ListEventType) => void
+} & ListProps
+
+export type ReactListProps = {
+    onSelect?: (event: ListEventType) => void
+} & ListProps

package/components/Menu/Menu.tsx

@@ -7,7 +7,6 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './menu.module.scss'
 
-// eslint-disable-next-line complexity
 const Menu = ({
     items,
     logo,
@@ -15,6 +14,7 @@ const Menu = ({
     className,
     wrapperClassName,
     children
+// eslint-disable-next-line complexity
 }: ReactMenuProps) => {
     const [active, setActive] = useState(false)
 

package/components/Pagination/Pagination.tsx

@@ -10,7 +10,6 @@ import ChevronRight from '../../icons/chevron-right.svg?raw'
 
 import styles from './pagination.module.scss'
 
-// eslint-disable-next-line complexity
 const Pagination = ({
     type,
     showChevrons,
@@ -27,6 +26,7 @@ const Pagination = ({
     currentPage,
     onChange,
     className
+// eslint-disable-next-line complexity
 }: ReactPaginationProps) => {
     const [calculatedCurrentPage, setCalculatedCurrentPage] = useState(
         currentPage

package/components/Pagination/pagination.module.scss

@@ -5,6 +5,7 @@
     @include spacing(0);
 
     list-style-type: none;
+    user-select: none;
 
     &.primary [data-active="true"] {
         @include typography(primary-70);

package/components/Popover/Popover.astro

@@ -1,26 +1,28 @@
----
-import type { PopoverProps } from './popover'
-
-import styles from './popover.module.scss'
-
-interface Props extends PopoverProps {}
-
-const {
-    id,
-    className,
-    ...rest
-} = Astro.props
-
-const classes = [
-    styles.popover,
-    className
-]
----
-
-<dialog
-    class:list={classes}
-    id={id}
-    {...rest}
->
-    <slot />
-</dialog>
+---
+import type { PopoverProps } from './popover'
+
+import styles from './popover.module.scss'
+
+interface Props extends PopoverProps {}
+
+const {
+    id,
+    className,
+    transparent,
+    ...rest
+} = Astro.props
+
+const classes = [
+    styles.popover,
+    transparent && styles.transparent,
+    className
+]
+---
+
+<dialog
+    class:list={classes}
+    id={id}
+    {...rest}
+>
+    <slot />
+</dialog>

package/components/Popover/Popover.svelte

@@ -8,12 +8,14 @@
     const {
         id,
         className,
+        transparent,
         children,
         ...rest
     }: SveltePopoverProps = $props()
 
     const classes = classNames([
         styles.popover,
+        transparent && styles.transparent,
         className
     ])
 </script>

package/components/Popover/Popover.tsx

@@ -9,6 +9,7 @@ import styles from './popover.module.scss'
 const Popover = ({
     id,
     className,
+    transparent,
     isInteractive = false,
     children,
     ...rest
@@ -17,6 +18,7 @@ const Popover = ({
 
     const classes = classNames([
         styles.popover,
+        transparent && styles.transparent,
         className
     ])
 

package/components/Popover/popover.module.scss

@@ -14,6 +14,12 @@
     transform: translateY(-5px);
     pointer-events: none;
 
+    &.transparent {
+        @include spacing(p0);
+        @include background(transparent);
+        @include border(0);
+    }
+
     &[data-show] {
         @include transition();
     }

package/components/Popover/popover.ts

@@ -1,16 +1,17 @@
-import type { Snippet } from 'svelte'
-
-export type PopoverProps = {
-    id?: string
-    className?: string
-    [key: string]: any
-}
-
-export type SveltePopoverProps = {
-    children: Snippet
-} & PopoverProps
-
-export type ReactPopoverProps = {
-    isInteractive?: boolean
-    children?: React.ReactNode
-} & PopoverProps
+import type { Snippet } from 'svelte'
+
+export type PopoverProps = {
+    id?: string
+    className?: string
+    transparent?: boolean
+    [key: string]: any
+}
+
+export type SveltePopoverProps = {
+    children: Snippet
+} & PopoverProps
+
+export type ReactPopoverProps = {
+    isInteractive?: boolean
+    children?: React.ReactNode
+} & PopoverProps

package/components/Progress/Progress.astro

@@ -17,6 +17,7 @@ const {
     striped,
     stripeLight,
     stripeDark,
+    indeterminate,
     className
 } = Astro.props
 
@@ -25,6 +26,7 @@ const classes = [
     size && styles[size],
     striped && styles.striped,
     square && styles.square,
+    indeterminate && styles.indeterminate,
     className
 ]
 
@@ -34,10 +36,12 @@ const styleVariables = classNames([
     stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
     stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
 ])
+
+const currentValue = indeterminate && !value ? 20 : value
 ---
 
 <div class:list={classes} style={styleVariables}>
-    <div class={styles.progress} style={`--w-progress-width: ${value}%;`}>
-        {label && `${value}%`}
+    <div class={styles.progress} style={`--w-progress-width: ${currentValue}%;`}>
+        {label && `${currentValue}%`}
     </div>
 </div>

package/components/Progress/Progress.svelte

@@ -15,6 +15,7 @@
         striped,
         stripeLight,
         stripeDark,
+        indeterminate,
         className
     }: ProgressProps = $props()
 
@@ -23,6 +24,7 @@
         size && styles[size],
         striped && styles.striped,
         square && styles.square,
+        indeterminate && styles.indeterminate,
         className
     ])
 
@@ -32,12 +34,14 @@
         stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
         stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
     ])
+
+    const currentValue = indeterminate && !value ? 20 : value
 </script>
 
 <div class={classes} style={styleVariables || null}>
-    <div class={styles.progress} style={`--w-progress-width: ${value}%;`}>
+    <div class={styles.progress} style={`--w-progress-width: ${currentValue}%;`}>
         {#if label}
-            {`${value}%`}
+            {`${currentValue}%`}
         {/if}
     </div>
 </div>

package/components/Progress/Progress.tsx

@@ -15,6 +15,7 @@ const Progress = ({
     striped,
     stripeLight,
     stripeDark,
+    indeterminate,
     className
 }: ProgressProps) => {
     const classes = classNames([
@@ -22,6 +23,7 @@ const Progress = ({
         size && styles[size],
         striped && styles.striped,
         square && styles.square,
+        indeterminate && styles.indeterminate,
         className
     ])
 
@@ -32,14 +34,16 @@ const Progress = ({
         ...(stripeDark && { '--w-progress-stripe-dark': stripeDark })
     } as React.CSSProperties
 
+    const currentValue = indeterminate && !value ? 20 : value
+
     const percent = {
-        '--w-progress-width': `${value}%`
+        '--w-progress-width': `${currentValue}%`
     } as React.CSSProperties
 
     return (
         <div className={classes} style={styleVariables}>
             <div className={styles.progress} style={percent}>
-                {label && `${value}%`}
+                {label && `${currentValue}%`}
             </div>
         </div>
     )