webcoreui 0.8.0 → 0.9.0

package/components/Select/Select.svelte

@@ -9,6 +9,7 @@
 
     import { classNames } from '../../utils/classNames'
     import { debounce } from '../../utils/debounce'
+    import { on } from '../../utils/DOMUtils'
     import { modal } from '../../utils/modal'
     import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
 
@@ -16,7 +17,7 @@
 
     import styles from './select.module.scss'
 
-    import type { ListEventType } from '../List/list'
+    import type { ListEventType, ListProps } from '../List/list'
 
     export let name: SvelteSelectProps['name'] = ''
     export let value: SvelteSelectProps['value'] = ''
@@ -28,8 +29,11 @@
     export let position: SvelteSelectProps['position'] = 'bottom'
     export let className: SvelteSelectProps['className'] = ''
     export let onChange: SvelteSelectProps['onChange'] = () => {}
+    export let onClose: SvelteSelectProps['onClose'] = () => {}
 
     let popoverInstance: any
+    let val: string
+    let focusByTab = false
 
     const classes = classNames([
         styles.select,
@@ -42,11 +46,22 @@
         styles.popover
     ])
 
+    const inferredValue = $$restProps.itemGroups
+        .map((group: ListProps['itemGroups'][0]) => group.items)
+        .flat()
+        .find((item: ListProps['itemGroups'][0]['items'][0]) => item.value === value)?.name
+
+    val = (value && inferredValue) ? inferredValue : value
+
+    const inputRestProps = Object.fromEntries(
+        Object.entries($$restProps).filter(([key]) => key.includes('data'))
+    )
+
     const select = (event: ListEventType) => {
         closePopover(`.w-options-${name}`)
 
         if (updateValue) {
-            value = event.name
+            val = event.name
         }
 
         onChange?.({
@@ -58,6 +73,14 @@
     onMount(() => {
         let observer: ResizeObserver | undefined
 
+        on(document, 'keydown', (event: KeyboardEvent) => {
+            if (event.key === 'Tab') {
+                focusByTab = true
+            }
+        })
+
+        on(document, 'mousedown', () => focusByTab = false)
+
         if (position === 'modal') {
             modal({
                 trigger: `.w-select-${name}`,
@@ -68,6 +91,9 @@
                     if (search) {
                         search.focus()
                     }
+                },
+                onClose(event) {
+                    onClose?.(event)
                 }
             })
         } else {
@@ -93,10 +119,19 @@
                     if (search) {
                         search.focus()
                     }
+                },
+                onClose(event) {
+                    onClose?.(event)
                 }
             })
         }
 
+        on(`.w-select-${name}`, 'focus', (event: Event) => {
+            if (focusByTab) {
+                (event.currentTarget as HTMLInputElement).click()
+            }
+        })
+
         return () => {
             popoverInstance?.remove()
             observer?.unobserve(document.body)
@@ -106,14 +141,15 @@
 
 <Input
     type="text"
-    value={value}
+    value={val}
     readonly={true}
     disabled={disabled}
-    placeholder={placeholder}
+    placeholder={placeholder || null}
     label={label}
     subText={subText}
     className={`w-select-${name}`}
     labelClassName={classes}
+    {...inputRestProps}
 >
     {@html ArrowDown}
 </Input>

package/components/Select/Select.tsx

@@ -8,6 +8,7 @@ import Popover from '../Popover/Popover.tsx'
 
 import { classNames } from '../../utils/classNames'
 import { debounce } from '../../utils/debounce'
+import { on } from '../../utils/DOMUtils'
 import { modal } from '../../utils/modal'
 import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
 
@@ -28,9 +29,14 @@ const Select = ({
     position = 'bottom',
     className,
     onChange,
+    onClose,
     ...rest
 }: ReactSelectProps) => {
-    const [val, setValue] = useState(value)
+    const inferredValue = rest.itemGroups.map(group => group.items)
+        .flat()
+        .find(item => item.value === value)?.name
+
+    const [val, setValue] = useState((value && inferredValue) ? inferredValue : value)
 
     const classes = classNames([
         styles.select,
@@ -42,7 +48,12 @@ const Select = ({
         styles.popover
     ])
 
+    const inputRestProps = Object.fromEntries(
+        Object.entries(rest).filter(([key]) => key.includes('data'))
+    )
+
     let popoverInstance: any
+    let focusByTab = false
 
     const select = (event: ListEventType) => {
         closePopover(`.w-options-${name}`)
@@ -60,6 +71,14 @@ const Select = ({
     useEffect(() => {
         let observer: ResizeObserver | undefined
 
+        on(document, 'keydown', (event: KeyboardEvent) => {
+            if (event.key === 'Tab') {
+                focusByTab = true
+            }
+        })
+
+        on(document, 'mousedown', () => focusByTab = false)
+
         if (position === 'modal') {
             modal({
                 trigger: `.w-select-${name}`,
@@ -70,6 +89,9 @@ const Select = ({
                     if (search) {
                         search.focus()
                     }
+                },
+                onClose(event) {
+                    onClose?.(event)
                 }
             })
         } else {
@@ -96,11 +118,20 @@ const Select = ({
                         if (search) {
                             search.focus()
                         }
+                    },
+                    onClose(event) {
+                        onClose?.(event)
                     }
                 })
             }, 0)
         }
 
+        on(`.w-select-${name}`, 'focus', (event: Event) => {
+            if (focusByTab) {
+                (event.currentTarget as HTMLInputElement).click()
+            }
+        })
+
         return () => {
             popoverInstance?.remove()
             observer?.unobserve(document.body)
@@ -119,6 +150,7 @@ const Select = ({
                 subText={subText}
                 className={`w-select-${name}`}
                 labelClassName={classes}
+                {...inputRestProps}
             >
                 <span
                     dangerouslySetInnerHTML={{ __html: ArrowDown }}

package/components/Select/select.ts

@@ -1,4 +1,5 @@
-import type { PopoverPosition } from '../../utils/popover'
+import type { ModalCallback } from '../../utils/modal'
+import type { PopoverCallback, PopoverPosition } from '../../utils/popover'
 
 import type { ListEventType, ListProps } from '../List/list'
 
@@ -19,8 +20,10 @@ export type SelectProps = {
 
 export type SvelteSelectProps = {
     onChange?: (event: SelectEventType) => void
+    onClose?: (event: ModalCallback | PopoverCallback) => void
 } & SelectProps
 
 export type ReactSelectProps = {
     onChange?: (event: SelectEventType) => void
+    onClose?: (event: ModalCallback | PopoverCallback) => void
 } & SelectProps

package/components/Skeleton/Skeleton.astro

@@ -25,8 +25,8 @@ const classes = [
 ]
 
 const styleVariables = classNames([
-    width && `width: ${width}px;`,
-    height && `height: ${height}px;`,
+    width && `max-width: ${width}px;`,
+    height && `max-height: ${height}px;`,
     color && `--w-skeleton-color: ${color};`,
     waveColor && `--w-skeleton-wave-color: ${waveColor};`
 ])

package/components/Skeleton/Skeleton.svelte

@@ -21,8 +21,8 @@
     ])
 
     const styleVariables = classNames([
-        width && `width: ${width}px;`,
-        height && `height: ${height}px;`,
+        width && `max-width: ${width}px;`,
+        height && `max-height: ${height}px;`,
         color && `--w-skeleton-color: ${color};`,
         waveColor && `--w-skeleton-wave-color: ${waveColor};`
     ])

package/components/Skeleton/Skeleton.tsx

@@ -22,8 +22,8 @@ const Skeleton = ({
     ])
 
     const styleVariables = {
-        ...(width && { width: `${width}px` }),
-        ...(height && { height: `${height}px` }),
+        ...(width && { maxWidth: `${width}px` }),
+        ...(height && { maxHeight: `${height}px` }),
         ...(color && { '--w-skeleton-color': color }),
         ...(waveColor && { '--w-skeleton-wave-color': waveColor })
     } as React.CSSProperties

package/components/Switch/Switch.astro

@@ -16,7 +16,8 @@ const {
     small,
     square,
     disabled,
-    className
+    className,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -35,7 +36,7 @@ const styleVariables = classNames([
 ---
 
 <label class:list={classes} style={styleVariables}>
-    <input type="checkbox" checked={toggled} disabled={disabled} />
+    <input type="checkbox" checked={toggled} disabled={disabled} {...rest} />
     <span class={styles.toggle}></span>
     {label && <span class={styles.label}>{label}</span>}
 </label>

package/components/Switch/Switch.svelte

@@ -37,6 +37,7 @@
         checked={toggled}
         disabled={disabled}
         on:click={onClick}
+        {...$$restProps}
     />
     <span class={styles.toggle}></span>
     {#if label}

package/components/Switch/Switch.tsx

@@ -15,7 +15,8 @@ const Switch = ({
     square,
     disabled,
     className,
-    onClick
+    onClick,
+    ...rest
 }: ReactSwitchProps) => {
     const classes = classNames([
         styles.switch,
@@ -38,6 +39,7 @@ const Switch = ({
                 defaultChecked={toggled}
                 disabled={disabled}
                 onClick={onClick}
+                {...rest}
             />
             <span className={styles.toggle}></span>
             {label && <span className={styles.label}>{label}</span>}

package/components/Switch/switch.ts

@@ -10,6 +10,7 @@ export type SwitchProps = {
     onColor?: string
     offColor?: string
     className?: string
+    [key: string]: any
 }
 
 export type SvelteSwitchProps = {

package/components/Textarea/Textarea.astro

@@ -13,7 +13,8 @@ const {
     subText,
     value = '',
     disabled,
-    className
+    className,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -41,5 +42,6 @@ const useLabel = !!(label || subText)
         placeholder={placeholder}
         disabled={disabled}
         class:list={classes}
+        {...rest}
     >{value}</textarea>
 </ConditionalWrapper>

package/components/Textarea/Textarea.svelte

@@ -1,47 +1,48 @@
-<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>
+<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}
+        {...$$restProps}
+    >{value}</textarea>
+    {#if subText}
+        <div class={styles.subtext}>
+            {@html subText}
+        </div>
+    {/if}
+</ConditionalWrapper>

package/components/Textarea/textarea.ts

@@ -1,18 +1,19 @@
-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
+export type TextareaProps = {
+    label?: string
+    placeholder?: string
+    subText?: string
+    value?: string
+    disabled?: boolean
+    className?: string
+    [key: string]: any
+}
+
+export type SvelteTextareaProps = {
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
+} & TextareaProps
+
+export type ReactTextareaProps = {
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
+} & TextareaProps

package/icons/copy.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.791 13.0523C23 12.5476 23 11.9059 23 10.625C23 9.34411 23 8.70244 22.791 8.19767C22.6528 7.86392 22.4502 7.56066 22.1948 7.30524C21.9393 7.04981 21.6361 6.8472 21.3023 6.709C20.7976 6.5 20.1559 6.5 18.875 6.5H10.9C9.36 6.5 8.59 6.5 8.00211 6.79944C7.48421 7.06318 7.06318 7.48421 6.79944 8.00211C6.5 8.58878 6.5 9.35878 6.5 10.9V18.875C6.5 20.1559 6.5 20.7976 6.709 21.3023C6.98889 21.9758 7.52422 22.5123 8.19767 22.791C8.70244 23 9.34411 23 10.625 23C11.9059 23 12.5476 23 13.0523 22.791M22.791 13.0523C22.6528 13.3861 22.4502 13.6893 22.1948 13.9448C21.9393 14.2002 21.6361 14.4028 21.3023 14.541C20.7976 14.75 20.1559 14.75 18.875 14.75C17.5941 14.75 16.9524 14.75 16.4477 14.959C16.1139 15.0972 15.8107 15.2998 15.5552 15.5552C15.2998 15.8107 15.0972 16.1139 14.959 16.4477C14.75 16.9524 14.75 17.5941 14.75 18.875C14.75 20.1559 14.75 20.7976 14.541 21.3023C14.4028 21.6361 14.2002 21.9393 13.9448 22.1948C13.6893 22.4502 13.3861 22.6528 13.0523 22.791M22.791 13.0523C22.1337 15.3195 20.9244 17.3883 19.2713 19.0734C17.6182 20.7585 15.573 22.0073 13.3188 22.7079L13.0523 22.791M17.5 6.5V5.4C17.5 3.86 17.5 3.09 17.2006 2.50211C16.9371 1.98439 16.5166 1.56338 15.9991 1.29944C15.41 1 14.64 1 13.1 1H5.4C3.86 1 3.09 1 2.50211 1.29944C1.98421 1.56318 1.56318 1.98421 1.29944 2.50211C1 3.08878 1 3.85878 1 5.4V13.1C1 14.64 1 15.41 1.29944 15.9979C1.56344 16.5161 1.98389 16.9366 2.50211 17.2006C3.08878 17.5 3.86 17.5 5.40122 17.5H6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons.d.ts

@@ -8,6 +8,7 @@ declare module 'webcoreui/icons' {
 	export const circleClose: string
 	export const close: string
 	export const components: string
+	export const copy: string
 	export const file: string
 	export const github: string
 	export const home: string

package/icons.js

@@ -7,6 +7,7 @@ export { default as circleCheck } from './icons/circle-check.svg?raw'
 export { default as circleClose } from './icons/circle-close.svg?raw'
 export { default as close } from './icons/close.svg?raw'
 export { default as components } from './icons/components.svg?raw'
+export { default as copy } from './icons/copy.svg?raw'
 export { default as file } from './icons/file.svg?raw'
 export { default as github } from './icons/github.svg?raw'
 export { default as home } from './icons/home.svg?raw'

package/index.d.ts

@@ -1,4 +1,73 @@
 
+export type Gap = 'none'
+    | 'xxs'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'default'
+    | 'lg'
+    | 'xl'
+    | 'xl2'
+    | 'xl3'
+    | 'xl4'
+    | 'xl5'
+    | ''
+
+export type VerticalAlignment = 'center'
+    | 'start'
+    | 'end'
+    | 'baseline'
+    | 'stretch'
+    | ''
+
+export type HorizontalAlignment = 'center'
+    | 'start'
+    | 'end'
+    | 'between'
+    | 'around'
+    | 'evenly'
+    | 'stretch'
+    | ''
+
+export type Direction = 'row'
+    | 'column'
+    | 'row-reverse'
+    | 'column-reverse'
+    | ''
+
+export type Wrap = 'wrap'
+    | 'nowrap'
+    | 'wrap-reverse'
+    | ''
+
+export type Column = (2 | 3) | {
+    default?: 2 | 3
+    xs?: 2 | 3 | 4
+    sm?: 2 | 3 | 4
+    md?: 2 | 3 | 4 | 5 | 6
+    lg?: 2 | 3 | 4 | 5 | 6 | 7 | 8
+} | null
+
+export type Responsive<T> = T | {
+    default?: T
+    xs?: T
+    sm?: T
+    md?: T
+    lg?: T
+}
+
+export type Alignment = {
+    horizontal?: HorizontalAlignment
+    vertical?: VerticalAlignment
+}
+
+export type getLayoutClassesConfig = {
+    gap?: Responsive<Gap>
+    alignment?: Responsive<Alignment>
+    direction?: Responsive<Direction>
+    wrap?: Responsive<Wrap>
+}
+
 export type ModalCallback = {
     trigger: Element | null
     modal: HTMLElement
@@ -36,6 +105,7 @@ export type Popover = {
     position?: PopoverPosition
     offset?: number
     closeOnBlur?: boolean
+    closeOnEsc?: boolean
     onOpen?: (args: PopoverCallback) => unknown
     onClose?: (args: PopoverCallback) => unknown
 }
@@ -68,9 +138,9 @@ declare module 'webcoreui' {
         cancel: () => void
     }
 
-    export const get: (selector: string, all: boolean) => Element | NodeListOf<Element> | null
+    export const get: (selector: string, all?: boolean) => Element | NodeListOf<Element> | null
     export const on: (
-        selector: string | HTMLElement,
+        selector: string | HTMLElement | Document,
         event: string,
         callback: any,
         all?: boolean
@@ -81,6 +151,8 @@ declare module 'webcoreui' {
         remove: () => void
     }
 
+    export const getLayoutClasses: (config: getLayoutClassesConfig) => string
+
     export const clamp: (num: number, min: number, max: number) => number
     export const lerp: (start: number, end: number, value: number) => number
     export const invlerp: (start: number, end: number, value: number) => number

package/index.js

@@ -3,6 +3,7 @@ export * from './utils/cookies.ts'
 export * from './utils/debounce.ts'
 export * from './utils/DOMUtils.ts'
 export * from './utils/event.ts'
+export * from './utils/getLayoutClasses.ts'
 export * from './utils/interpolate.ts'
 export * from './utils/modal.ts'
 export * from './utils/popover.ts'

package/package.json

@@ -1,40 +1,49 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.8.0",
+    "version": "0.9.0",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
         "dev": "astro dev",
         "build": "astro check && astro build",
         "build:package": "node scripts/build.js",
-        "test": "echo \"Error: no test specified\"",
+        "build:local": "node scripts/build.js --local",
+        "compile": "node scripts/sass.js",
+        "test": "cd .. && vitest run && npm run test:sass",
+        "test:dev": "vitest",
+        "test:run": "vitest run",
+        "test:sass": "vitest run src/tests/scss.test.js --config astro.config.mjs",
         "create-component": "node scripts/createComponent.js",
         "lint": "eslint src/**/* --fix"
     },
     "devDependencies": {
         "@astrojs/check": "0.9.4",
-        "@astrojs/node": "8.3.4",
+        "@astrojs/node": "9.0.0",
         "@astrojs/react": "3.6.2",
-        "@astrojs/svelte": "5.5.0",
-        "@eslint/js": "9.9.1",
-        "@typescript-eslint/parser": "8.3.0",
-        "astro": "4.16.7",
-        "astro-eslint-parser": "1.0.2",
+        "@astrojs/svelte": "7.0.1",
+        "@eslint/js": "9.16.0",
+        "@typescript-eslint/parser": "8.18.0",
+        "astro": "5.0.5",
+        "astro-eslint-parser": "1.1.0",
         "eslint": "9.9.1",
-        "eslint-plugin-astro": "1.2.3",
+        "eslint-plugin-astro": "1.3.1",
         "eslint-plugin-react": "7.35.0",
         "eslint-plugin-simple-import-sort": "12.1.1",
         "eslint-plugin-svelte": "2.43.0",
-        "husky": "9.1.5",
-        "lint-staged": "15.2.9",
+        "husky": "9.1.7",
+        "jsdom": "25.0.1",
+        "lint-staged": "15.2.11",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "sass": "1.80.6",
-        "svelte": "4.2.19",
+        "sass": "1.82.0",
+        "sass-true": "8.1.0",
+        "svelte": "5.12.0",
         "svelte-eslint-parser": "0.41.0",
-        "typescript": "5.4.5",
-        "typescript-eslint": "8.3.0"
+        "typescript": "5.7.2",
+        "typescript-eslint": "8.18.0",
+        "vite-tsconfig-paths": "5.1.4",
+        "vitest": "2.1.8"
     },
     "exports": {
         ".": "./index.js",