webcoreui 1.2.0 → 1.4.0

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

@@ -10,12 +10,20 @@
     @include border-radius(md);
     @include size(w300px);
     @include position('t-100%');
+    @include transition();
 
     transform: translateY(-5px);
     pointer-events: none;
+    will-change: transform, opacity;
 
-    &[data-show] {
-        @include transition();
+    &.transparent {
+        @include spacing(p0);
+        @include background(transparent);
+        @include border(0);
+    }
+
+    &[data-no-transition] {
+        @include transition(none);
     }
 
     &[data-show="true"] {

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>
     )

package/components/Progress/progress.module.scss

@@ -58,6 +58,12 @@ body {
         }
     }
 
+    &.indeterminate .progress {
+        @include position(relative);
+
+        animation: load 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
+    }
+
     .progress {
         @include transition(width);
         @include size('h100%');
@@ -68,3 +74,12 @@ body {
         width: var(--w-progress-width);
     }
 }
+
+@keyframes load {
+    from {
+        left: -100%;
+    }
+    to {
+        left: 100%;
+    }
+}

package/components/Progress/progress.ts

@@ -8,5 +8,6 @@ export type ProgressProps = {
     striped?: boolean
     stripeLight?: string
     stripeDark?: string
+    indeterminate?: boolean
     className?: string
 }

package/components/RangeSlider/RangeSlider.astro

@@ -22,6 +22,7 @@ const {
     color,
     background,
     thumb,
+    name,
     label,
     subText,
     minLabel,
@@ -84,6 +85,7 @@ const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
             />
             <input
                 type="range"
+                name={name}
                 class:list={[styles.input, styles.min]}
                 min={min}
                 max={max}
@@ -94,6 +96,7 @@ const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
             />
             <input
                 type="range"
+                name={name}
                 min={min}
                 max={max}
                 class={styles.input}
@@ -189,6 +192,7 @@ const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
                 }
 
                 dispatch('rangeSliderOnChange', {
+                    name: target.name,
                     min: minValue,
                     max: maxValue
                 })
@@ -257,6 +261,7 @@ const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
             }
 
             dispatch('rangeSliderOnChange', {
+                name: minInput.name,
                 min: minValue,
                 max: maxValue
             })

package/components/RangeSlider/RangeSlider.svelte

@@ -173,12 +173,12 @@
             condition={!!interactiveLabels}
             onclick={(e: Event) => handleClick(e, 'right')}
         >
-            {#if maxIcon}
-                {@html maxIcon}
-            {/if}
             {#if dynamicMaxLabel}
                 <span style={labelStyle}>{dynamicMaxLabel}</span>
             {/if}
+            {#if maxIcon}
+                {@html maxIcon}
+            {/if}
         </ConditionalWrapper>
     </div>
 

package/components/RangeSlider/RangeSlider.tsx

@@ -187,13 +187,13 @@ const RangeSlider = ({
                         <button onClick={(e: React.MouseEvent) => handleClick(e, 'right')}>{children}</button>
                     )}
                 >
+                    {dynamicMaxLabel && <span style={labelStyle}>{dynamicMaxLabel}</span>}
                     {maxIcon && (
                         <span
                             dangerouslySetInnerHTML={{ __html: maxIcon }}
                             style={{ height: 18 }}
                         />
                     )}
-                    {dynamicMaxLabel && <span style={labelStyle}>{dynamicMaxLabel}</span>}
                 </ConditionalWrapper>
             </div>
 

package/components/RangeSlider/rangeslider.ts

@@ -16,6 +16,7 @@ export type RangeSliderProps = {
     color?: string
     background?: string
     thumb?: string
+    name?: string
     label?: string
     subText?: string
     minLabel?: string

package/components/Switch/Switch.svelte

@@ -16,6 +16,7 @@
         disabled,
         className,
         onClick,
+        onChange,
         ...rest
     }: SvelteSwitchProps = $props()
 
@@ -40,6 +41,7 @@
         checked={toggled}
         disabled={disabled}
         onclick={onClick}
+        onchange={onChange}
         {...rest}
     />
     <span class={styles.toggle}></span>

package/components/Switch/Switch.tsx

@@ -15,7 +15,6 @@ const Switch = ({
     square,
     disabled,
     className,
-    onClick,
     ...rest
 }: ReactSwitchProps) => {
     const classes = classNames([
@@ -38,7 +37,6 @@ const Switch = ({
                 type="checkbox"
                 defaultChecked={toggled}
                 disabled={disabled}
-                onClick={onClick}
                 {...rest}
             />
             <span className={styles.toggle}></span>

package/components/Switch/switch.module.scss

@@ -8,6 +8,7 @@ body {
 .switch {
     @include layout(inline-flex, v-center, sm);
     cursor: pointer;
+    user-select: none;
 
     &.reverse {
         @include layout(row-reverse);

package/components/Switch/switch.ts

@@ -1,4 +1,4 @@
-import type { MouseEventHandler } from 'svelte/elements'
+import type { ChangeEventHandler, MouseEventHandler } from 'svelte/elements'
 
 export type SwitchProps = {
     label?: string
@@ -14,9 +14,11 @@ export type SwitchProps = {
 }
 
 export type SvelteSwitchProps = {
+    onChange?: ChangeEventHandler<HTMLInputElement>
     onClick?: MouseEventHandler<HTMLInputElement>
 } & SwitchProps
 
 export type ReactSwitchProps = {
+    onChange?: React.ChangeEventHandler<HTMLInputElement>
     onClick?: React.MouseEventHandler<HTMLInputElement>
 } & SwitchProps

package/components/Textarea/Textarea.svelte

@@ -16,6 +16,7 @@
         className,
         onChange,
         onKeyUp,
+        onInput,
         ...rest
     }: SvelteTextareaProps = $props()
 
@@ -39,6 +40,7 @@
         placeholder={placeholder}
         disabled={disabled}
         class={classes}
+        oninput={onInput}
         onchange={onChange}
         onkeyup={onKeyUp}
         {...rest}

package/components/Textarea/textarea.ts

@@ -1,5 +1,4 @@
-type Target = {
-    target: HTMLTextAreaElement
+export type TextareaTarget = {
     currentTarget: HTMLTextAreaElement
 }
 
@@ -14,11 +13,13 @@ export type TextareaProps = {
 }
 
 export type SvelteTextareaProps = {
-    onChange?: (event: Event & Target) => void
-    onKeyUp?: (event: KeyboardEvent & Target) => void
+    onInput?: (event: Event & TextareaTarget) => void
+    onChange?: (event: Event & TextareaTarget) => void
+    onKeyUp?: (event: KeyboardEvent & TextareaTarget) => void
 } & TextareaProps
 
 export type ReactTextareaProps = {
-    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement> & Target) => void
-    onKeyUp?: (event: React.KeyboardEvent<HTMLTextAreaElement> & Target) => void
+    onInput?: (event: React.InputEvent<HTMLTextAreaElement>) => void
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+    onKeyUp?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
 } & TextareaProps

package/components/ThemeSwitcher/themeswitcher.module.scss

@@ -38,6 +38,7 @@ body {
     width: var(--w-theme-switcher-size);
     height: var(--w-theme-switcher-size);
     cursor: pointer;
+    user-select: none;
 
     &.icons {
         @include transition(opacity);

package/components/ThemeSwitcher/themeswitcher.ts

@@ -12,6 +12,7 @@ export type ThemeSwitcherProps = {
 export type SvelteThemeSwitcherProps = {
     primaryIcon?: Snippet
     secondaryIcon?: Snippet
+    children?: Snippet
 } & ThemeSwitcherProps
 
 export type ReactThemeSwitcherProps = {

package/icons/minus.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6 12h12" />
+</svg>

package/icons.d.ts

@@ -12,6 +12,7 @@ declare module 'webcoreui/icons' {
 	export const github: string
 	export const home: string
 	export const info: string
+	export const minus: string
 	export const moon: string
 	export const order: string
 	export const plus: string

package/icons.js

@@ -11,6 +11,7 @@ export { default as copy } from './icons/copy.svg?raw'
 export { default as github } from './icons/github.svg?raw'
 export { default as home } from './icons/home.svg?raw'
 export { default as info } from './icons/info.svg?raw'
+export { default as minus } from './icons/minus.svg?raw'
 export { default as moon } from './icons/moon.svg?raw'
 export { default as order } from './icons/order.svg?raw'
 export { default as plus } from './icons/plus.svg?raw'

package/index.d.ts

@@ -86,7 +86,7 @@ export type ModalCallback = {
 }
 
 export type Modal = {
-    trigger: string
+    trigger?: string
     modal: string
     onOpen?: (args: ModalCallback) => unknown
     onClose?: (args: ModalCallback) => unknown
@@ -105,6 +105,12 @@ export type PopoverPosition = 'top'
     | 'bottom-start'
     | 'bottom-end'
 
+export type PopoverInstance = {
+    close: () => void
+    destroy: () => void
+    remove: () => void
+}
+
 export type PopoverCallback = {
     trigger: HTMLElement
     popover: HTMLElement
@@ -152,7 +158,10 @@ declare module 'webcoreui' {
         cancel: () => void
     }
 
-    export const get: (selector: string, all?: boolean) => Element | NodeListOf<Element> | null
+    export const get: <T extends Element = Element>(
+        selector: string,
+        all?: boolean
+    ) => T | NodeListOf<T> | null
     export const on: (
         selector: string | HTMLElement | Document,
         event: string,
@@ -189,9 +198,7 @@ declare module 'webcoreui' {
     export const modal: (config: Modal | string) => ModalInstance | undefined 
     export const closeModal: (modal: string) => void
 
-    export const popover: (config: Popover) => {
-        remove: () => void
-    } | void
+    export const popover: (config: Popover) => PopoverInstance | undefined
     export const closePopover: (selector: string) => void
 
     export const setDefaultTimeout: (time: number) => number