webcoreui 1.1.0-beta.1 → 1.1.0-beta.3

package/README.md

@@ -60,15 +60,15 @@ Webcore can be used as a standalone project, or it can be integrated into your e
 
 Webcore components use Sass for styling. To use the component library, you must have the following packages installed:
 
-- [Sass](https://www.npmjs.com/package/sass) - `v1.86`
+- [Sass](https://www.npmjs.com/package/sass) - `v1.9`
 - [TypeScript](https://www.npmjs.com/package/typescript) - `v5.8`
 
 Depending on your project setup, you'll also need the following packages:
 
 - **For Astro projects**
-    - [Astro](https://www.npmjs.com/package/astro) - `v5.5`
+    - [Astro](https://www.npmjs.com/package/astro) - `v5.13`
 - **For Svelte projects**
-    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.25`
+    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.38`
 - **For React projects**
     - [React](https://www.npmjs.com/package/react) - `v19.0`
     - [React DOM](https://www.npmjs.com/package/react-dom) -`v19.0`
@@ -244,6 +244,7 @@ import { Accordion } from 'webcoreui/react'
 - [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox)
 - [Collapsible](https://github.com/Frontendland/webcoreui/tree/main/src/components/Collapsible)
 - [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
+- [ContextMenu](https://github.com/Frontendland/webcoreui/tree/main/src/components/ContextMenu)
 - [Copy](https://github.com/Frontendland/webcoreui/tree/main/src/components/Copy)
 - [DataTable](https://github.com/Frontendland/webcoreui/tree/main/src/components/DataTable)
 - [Flex](https://github.com/Frontendland/webcoreui/tree/main/src/components/Flex)

package/astro.d.ts

@@ -12,6 +12,7 @@ import type { CarouselProps as WCarouselProps } from './components/Carousel/caro
 import type { CheckboxProps as WCheckboxProps } from './components/Checkbox/checkbox'
 import type { CollapsibleProps as WCollapsibleProps } from './components/Collapsible/collapsible'
 import type { ConditionalWrapperProps as WConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { ContextMenuProps as WContextMenuProps } from './components/ContextMenu/contextmenu'
 import type { CopyProps as WCopyProps } from './components/Copy/copy'
 import type { DataTableProps as WDataTableProps } from './components/DataTable/datatable'
 import type { FlexProps as WFlexProps } from './components/Flex/flex'
@@ -70,6 +71,7 @@ declare module 'webcoreui/astro' {
 	export function Checkbox(_props: WCheckboxProps): any
 	export function Collapsible(_props: WCollapsibleProps): any
 	export function ConditionalWrapper(_props: WConditionalWrapperProps): any
+	export function ContextMenu(_props: WContextMenuProps): any
 	export function Copy(_props: WCopyProps): any
 	export function DataTable(_props: WDataTableProps): any
 	export function Flex(_props: WFlexProps): any
@@ -122,6 +124,7 @@ declare module 'webcoreui/astro' {
 	export type CheckboxProps = WCheckboxProps
 	export type CollapsibleProps = WCollapsibleProps
 	export type ConditionalWrapperProps = WConditionalWrapperProps
+	export type ContextMenuProps = WContextMenuProps
 	export type CopyProps = WCopyProps
 	export type DataTableProps = WDataTableProps
 	export type FlexProps = WFlexProps

package/astro.js

@@ -12,6 +12,7 @@ import CarouselComponent from './components/Carousel/Carousel.astro'
 import CheckboxComponent from './components/Checkbox/Checkbox.astro'
 import CollapsibleComponent from './components/Collapsible/Collapsible.astro'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
+import ContextMenuComponent from './components/ContextMenu/ContextMenu.astro'
 import CopyComponent from './components/Copy/Copy.astro'
 import DataTableComponent from './components/DataTable/DataTable.astro'
 import FlexComponent from './components/Flex/Flex.astro'
@@ -64,6 +65,7 @@ export const Carousel = CarouselComponent
 export const Checkbox = CheckboxComponent
 export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
+export const ContextMenu = ContextMenuComponent
 export const Copy = CopyComponent
 export const DataTable = DataTableComponent
 export const Flex = FlexComponent

package/components/Alert/alert.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import type { Snippet } from 'svelte'
 
 export type AlertProps = {

package/components/Card/card.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import type { Snippet } from 'svelte'
 
 export type CardProps = {

package/components/Carousel/Carousel.tsx

@@ -132,7 +132,7 @@ const Carousel = ({
         const usedInAstro = carousel.current?.children[0].nodeName === 'ASTRO-SLOT'
 
         carouselItems.current = usedInAstro
-            ? carousel.current.querySelectorAll('li')
+            ? carousel.current?.querySelectorAll('li')
             : carousel.current?.children
 
         carouselContainer.current?.addEventListener('scroll', scroll)

package/components/ContextMenu/ContextMenu.astro

@@ -0,0 +1,90 @@
+---
+import type { ContextMenuProps } from './contextmenu'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './contextmenu.module.scss'
+
+interface Props extends ContextMenuProps {}
+
+const {
+    element = 'div',
+    className,
+    ...rest
+} = Astro.props
+
+const Component = element
+
+const classes = classNames([
+    styles.ctx,
+    className
+])
+
+const props = {
+    class: classes
+}
+
+if (!Astro.slots.has('context')) {
+    // eslint-disable-next-line no-console, max-len
+    console.error('Missing "context" slot. Attach slot="context" to one of the children of your <ContextMenu> component.')
+}
+---
+
+<Component {...rest} {...props} data-id="w-ctx">
+    <slot />
+    <div class={styles.content} data-id="w-ctx-content">
+        <slot name="context" />
+    </div>
+</Component>
+
+<script>
+    import { get, on } from '../../utils/DOMUtils'
+
+    const addEventListeners = () => {
+        const ctxs = get('[data-id="w-ctx"]', true) as NodeListOf<HTMLElement>
+        const contents: HTMLDivElement[] = []
+
+        const hideContent = (content: HTMLDivElement, event: MouseEvent) => {
+            if (content.contains(event.target as Node)) {
+                return
+            }
+
+            content.dataset.show = 'false'
+
+            setTimeout(() => {
+                content.style.top = ''
+                content.style.left = ''
+            }, 200)
+        }
+
+        [...ctxs].forEach((ctx, i) => {
+            on(ctx, 'contextmenu', (event: MouseEvent) => {
+                event.preventDefault()
+
+                if (!contents[i]) {
+                    const target = event.currentTarget as HTMLElement
+                    contents[i] = target.lastElementChild as HTMLDivElement
+                }
+
+                if (contents.length > 1) {
+                    contents.forEach((content, y) => {
+                        if (i !== y) {
+                            hideContent(content, event)
+                        }
+                    })
+                }
+
+                contents[i].style.top = `${event.offsetY}px`
+                contents[i].style.left = `${event.offsetX}px`
+                contents[i].dataset.show = 'true'
+            })
+        })
+
+        on(document, 'click', (event: MouseEvent) => {
+            contents.forEach(content => hideContent(content, event))
+        })
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
+</script>

package/components/ContextMenu/ContextMenu.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import type { SvelteContextMenuProps } from './contextmenu'
+
+    import { classNames } from '../../utils/classNames'
+    import { on } from '../../utils/DOMUtils'
+
+    import styles from './contextmenu.module.scss'
+
+    const {
+        element = 'div',
+        className,
+        children,
+        context,
+        ...rest
+    }: SvelteContextMenuProps = $props()
+
+    const classes = classNames([
+        styles.ctx,
+        className
+    ])
+
+    const showContext = (event: MouseEvent) => {
+        event.preventDefault()
+
+        if (content) {
+            content.style.top = `${event.offsetY}px`
+            content.style.left = `${event.offsetX}px`
+            content.dataset.show = 'true'
+        }
+    }
+
+    const hideContext = (event: MouseEvent) => {
+        if (content) {
+            if (content.contains(event.target as Node)) {
+                return
+            }
+
+            content.dataset.show = 'false'
+
+            setTimeout(() => {
+                if (content) {
+                    content.style.top = ''
+                    content.style.left = ''
+                }
+            }, 200)
+        }
+    }
+
+    let ctx: HTMLElement
+    let content: HTMLDivElement
+
+    onMount(() => {
+        if (ctx && content) {
+            on(ctx, 'contextmenu', showContext)
+            on(document, 'click', hideContext)
+        }
+
+        return () => {
+            ctx?.removeEventListener('contextmenu', showContext)
+            document.removeEventListener('click', hideContext)
+        }
+    })
+
+    if (!context) {
+        // eslint-disable-next-line no-console, max-len
+        console.error('Missing "context" slot. Attach slot="context" to one of the children of your <ContextMenu> component.')
+    }
+</script>
+
+<svelte:element {...rest} this={element} class={classes} bind:this={ctx}>
+    {@render children?.()}
+    <div class={styles.content} bind:this={content}>
+        {@render context?.()}
+    </div>
+</svelte:element>

package/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useRef } from 'react'
+import type { ReactContextMenuProps } from './contextmenu'
+
+import { classNames } from '../../utils/classNames'
+import { on } from '../../utils/DOMUtils'
+
+import styles from './contextmenu.module.scss'
+
+const ContextMenu = ({
+    Element = 'div',
+    className,
+    children,
+    context,
+    ...rest
+}: ReactContextMenuProps) => {
+    const ctx = useRef<HTMLElement>(null)
+    const content = useRef<HTMLDivElement>(null)
+    const classes = classNames([
+        styles.ctx,
+        className
+    ])
+
+    const showContext = (event: MouseEvent) => {
+        event.preventDefault()
+
+        if (content.current) {
+            content.current.style.top = `${event.offsetY}px`
+            content.current.style.left = `${event.offsetX}px`
+            content.current.dataset.show = 'true'
+        }
+    }
+
+    const hideContext = (event: MouseEvent) => {
+        if (content.current) {
+            if (content.current.contains(event.target as Node)) {
+                return
+            }
+
+            content.current.dataset.show = 'false'
+
+            setTimeout(() => {
+                if (content.current) {
+                    content.current.style.top = ''
+                    content.current.style.left = ''
+                }
+            }, 200)
+        }
+    }
+
+    useEffect(() => {
+        if (ctx.current) {
+            on(ctx.current, 'contextmenu', showContext)
+            on(document, 'click', hideContext)
+        }
+
+        return () => {
+            ctx.current?.removeEventListener('contextmenu', showContext)
+            document.removeEventListener('click', hideContext)
+        }
+    }, [])
+
+    if (!context) {
+        // eslint-disable-next-line no-console
+        console.error('Missing `context` prop. Add `context={...}` to your <ContextMenu> component.')
+    }
+
+    return (
+        <Element {...rest} className={classes} ref={ctx}>
+            {children}
+            <div className={styles.content} ref={content} onClick={event => event.stopPropagation()}>
+                {context}
+            </div>
+        </Element>
+
+    )
+}
+
+export default ContextMenu

package/components/ContextMenu/contextmenu.module.scss

@@ -0,0 +1,24 @@
+@use '../../scss/config.scss' as *;
+
+.ctx {
+    @include position(relative);
+}
+
+.content {
+    @include position(absolute);
+    @include background(primary-70);
+    @include size(wmax-content);
+    @include layer(modal);
+    @include transition(.2s);
+    @include visibility(0);
+
+    transform: scale(.95);
+    pointer-events: none;
+
+    &[data-show="true"] {
+        @include visibility(1);
+
+        transform: scale(1);
+        pointer-events: all;
+    }
+}

package/components/ContextMenu/contextmenu.ts

@@ -0,0 +1,19 @@
+import type React from 'react'
+import type { Snippet } from 'svelte'
+
+export type ContextMenuProps = {
+    element?: string
+    className?: string
+    [key: string]: any
+}
+
+export type SvelteContextMenuProps = {
+    children: Snippet
+    context: Snippet
+} & ContextMenuProps
+
+export type ReactContextMenuProps = {
+    Element?: React.ElementType
+    children: React.ReactNode
+    context: React.ReactNode
+} & Omit<ContextMenuProps, 'element'>

package/components/Flex/flex.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import type { Snippet } from 'svelte'
 
 import type {

package/components/Grid/grid.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import type { Snippet } from 'svelte'
 
 import type {

package/components/Masonry/Masonry.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import type { ReactMasonryProps } from './masonry'
 
 import { classNames } from '../../utils/classNames'

package/components/TimelineItem/timelineitem.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import type { Snippet } from 'svelte'
 
 import type { IconProps } from '../Icon/icon'

package/index.d.ts

@@ -126,6 +126,7 @@ export type Toast = {
 declare module 'webcoreui' {
     export const bodyFreeze: (freeze: boolean) => void
     export const classNames: (classes: any[]) => string
+    export const closeContext: (ctx: string | HTMLElement) => void
 
     export const setCookie: (name: string, value: string, days: number) => void
     export const getCookie: (name: string) => string | null

package/index.js

@@ -1,5 +1,6 @@
 export * from './utils/bodyFreeze.ts'
 export * from './utils/classNames.ts'
+export * from './utils/context.ts'
 export * from './utils/cookies.ts'
 export * from './utils/debounce.ts'
 export * from './utils/DOMUtils.ts'

package/integration.d.ts

@@ -0,0 +1,8 @@
+
+import type { AstroIntegration } from 'astro'
+import { Plugin } from 'vite'
+
+declare module 'webcoreui/integration' {
+    export const webcore: () => AstroIntegration
+    export const webcoreVite: () => Plugin
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "1.1.0-beta.1",
+    "version": "1.1.0-beta.3",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
@@ -18,13 +18,12 @@
     },
     "devDependencies": {
         "@astrojs/check": "0.9.4",
-        "@astrojs/node": "9.1.3",
-        "@astrojs/react": "4.2.1",
-        "@astrojs/svelte": "7.0.7",
+        "@astrojs/node": "9.4.1",
+        "@astrojs/react": "4.3.0",
+        "@astrojs/svelte": "7.1.0",
         "@eslint/js": "9.23.0",
-        "@types/node": "24.2.1",
-        "@typescript-eslint/parser": "8.27.0",
-        "astro": "5.5.4",
+        "@typescript-eslint/parser": "8.39.1",
+        "astro": "5.13.0",
         "astro-eslint-parser": "1.2.2",
         "eslint": "9.23.0",
         "eslint-plugin-astro": "1.3.1",
@@ -36,12 +35,12 @@
         "lint-staged": "15.5.0",
         "react": "19.0.0",
         "react-dom": "19.0.0",
-        "sass": "1.86.0",
+        "sass": "1.90.0",
         "sass-true": "8.1.0",
-        "svelte": "5.25.3",
+        "svelte": "5.38.1",
         "svelte-eslint-parser": "1.1.0",
-        "typescript": "5.8.2",
-        "typescript-eslint": "8.27.0",
+        "typescript": "5.9.2",
+        "typescript-eslint": "8.39.1",
         "vite-tsconfig-paths": "5.1.4",
         "vitest": "3.0.4"
     },
@@ -71,6 +70,7 @@
         "index.js",
         "index.d.ts",
         "integration.js",
+        "integration.d.ts",
         "README.md",
         "LICENSE"
     ],

package/react.d.ts

@@ -13,6 +13,7 @@ import type { ReactCarouselProps as WReactCarouselProps } from './components/Car
 import type { ReactCheckboxProps as WReactCheckboxProps } from './components/Checkbox/checkbox'
 import type { ReactCollapsibleProps as WReactCollapsibleProps } from './components/Collapsible/collapsible'
 import type { ReactConditionalWrapperProps as WReactConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { ReactContextMenuProps as WReactContextMenuProps } from './components/ContextMenu/contextmenu'
 import type { ReactCopyProps as WReactCopyProps } from './components/Copy/copy'
 import type { ReactDataTableProps as WReactDataTableProps } from './components/DataTable/datatable'
 import type { ReactFlexProps as WReactFlexProps } from './components/Flex/flex'
@@ -71,6 +72,7 @@ declare module 'webcoreui/react' {
 	export const Checkbox: FC<WReactCheckboxProps>
 	export const Collapsible: FC<WReactCollapsibleProps>
 	export const ConditionalWrapper: FC<WReactConditionalWrapperProps>
+	export const ContextMenu: FC<WReactContextMenuProps>
 	export const Copy: FC<WReactCopyProps>
 	export const DataTable: FC<WReactDataTableProps>
 	export const Flex: FC<WReactFlexProps>
@@ -123,6 +125,7 @@ declare module 'webcoreui/react' {
 	export type CheckboxProps = WReactCheckboxProps
 	export type CollapsibleProps = WReactCollapsibleProps
 	export type ConditionalWrapperProps = WReactConditionalWrapperProps
+	export type ContextMenuProps = WReactContextMenuProps
 	export type CopyProps = WReactCopyProps
 	export type DataTableProps = WReactDataTableProps
 	export type FlexProps = WReactFlexProps

package/react.js

@@ -12,6 +12,7 @@ import CarouselComponent from './components/Carousel/Carousel.tsx'
 import CheckboxComponent from './components/Checkbox/Checkbox.tsx'
 import CollapsibleComponent from './components/Collapsible/Collapsible.tsx'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.tsx'
+import ContextMenuComponent from './components/ContextMenu/ContextMenu.tsx'
 import CopyComponent from './components/Copy/Copy.tsx'
 import DataTableComponent from './components/DataTable/DataTable.tsx'
 import FlexComponent from './components/Flex/Flex.tsx'
@@ -64,6 +65,7 @@ export const Carousel = CarouselComponent
 export const Checkbox = CheckboxComponent
 export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
+export const ContextMenu = ContextMenuComponent
 export const Copy = CopyComponent
 export const DataTable = DataTableComponent
 export const Flex = FlexComponent

package/svelte.d.ts

@@ -13,6 +13,7 @@ import type { SvelteCarouselProps as WSvelteCarouselProps } from './components/C
 import type { SvelteCheckboxProps as WSvelteCheckboxProps } from './components/Checkbox/checkbox'
 import type { SvelteCollapsibleProps as WSvelteCollapsibleProps } from './components/Collapsible/collapsible'
 import type { SvelteConditionalWrapperProps as WSvelteConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { SvelteContextMenuProps as WSvelteContextMenuProps } from './components/ContextMenu/contextmenu'
 import type { SvelteCopyProps as WSvelteCopyProps } from './components/Copy/copy'
 import type { SvelteDataTableProps as WSvelteDataTableProps } from './components/DataTable/datatable'
 import type { SvelteFlexProps as WSvelteFlexProps } from './components/Flex/flex'
@@ -71,6 +72,7 @@ declare module 'webcoreui/svelte' {
 	export const Checkbox: Component<WSvelteCheckboxProps>
 	export const Collapsible: Component<WSvelteCollapsibleProps>
 	export const ConditionalWrapper: Component<WSvelteConditionalWrapperProps>
+	export const ContextMenu: Component<WSvelteContextMenuProps>
 	export const Copy: Component<WSvelteCopyProps>
 	export const DataTable: Component<WSvelteDataTableProps>
 	export const Flex: Component<WSvelteFlexProps>
@@ -123,6 +125,7 @@ declare module 'webcoreui/svelte' {
 	export type CheckboxProps = WSvelteCheckboxProps
 	export type CollapsibleProps = WSvelteCollapsibleProps
 	export type ConditionalWrapperProps = WSvelteConditionalWrapperProps
+	export type ContextMenuProps = WSvelteContextMenuProps
 	export type CopyProps = WSvelteCopyProps
 	export type DataTableProps = WSvelteDataTableProps
 	export type FlexProps = WSvelteFlexProps

package/svelte.js

@@ -12,6 +12,7 @@ import CarouselComponent from './components/Carousel/Carousel.svelte'
 import CheckboxComponent from './components/Checkbox/Checkbox.svelte'
 import CollapsibleComponent from './components/Collapsible/Collapsible.svelte'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.svelte'
+import ContextMenuComponent from './components/ContextMenu/ContextMenu.svelte'
 import CopyComponent from './components/Copy/Copy.svelte'
 import DataTableComponent from './components/DataTable/DataTable.svelte'
 import FlexComponent from './components/Flex/Flex.svelte'
@@ -64,6 +65,7 @@ export const Carousel = CarouselComponent
 export const Checkbox = CheckboxComponent
 export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
+export const ContextMenu = ContextMenuComponent
 export const Copy = CopyComponent
 export const DataTable = DataTableComponent
 export const Flex = FlexComponent

package/utils/context.ts

@@ -0,0 +1,20 @@
+export const closeContext = (ctx: string | HTMLElement) => {
+    const element = typeof ctx === 'string'
+        ? document.querySelector(ctx) as HTMLElement
+        : ctx
+
+    const parent = element?.parentElement as HTMLElement
+
+    if (!parent) {
+        // eslint-disable-next-line no-console
+        console.error('Could not found context for:', ctx)
+        return
+    }
+
+    parent.dataset.show = 'false'
+
+    setTimeout(() => {
+        parent.style.top = ''
+        parent.style.left = ''
+    }, 200)
+}