webcoreui 1.1.0-beta.3 → 1.1.0

package/README.md

@@ -40,14 +40,18 @@
 - [Documentation](#documentation)
 - [Getting started](#getting-started)
     - [Prerequisites](#prerequisites)
-    - [Installation](#installation)
+    - [Installation with CLI](#installation-with-cli)
+    - [Manual Installation](#manual-installation)
     - [Setup](#setup)
     - [Using Components](#using-components)
 - [Components](#components)
+- [Blocks](#blocks)
+- [Templates](#templates)
 
 ## Documentation
 
-Full documentation available on [webcoreui.dev](https://webcoreui.dev).
+- Full documentation available on [webcoreui.dev](https://webcoreui.dev).
+- For installation steps, visit our [setup docs](https://webcoreui.dev/docs/setup).
 
 ## Getting Started
 
@@ -73,7 +77,28 @@ Depending on your project setup, you'll also need the following packages:
     - [React](https://www.npmjs.com/package/react) - `v19.0`
     - [React DOM](https://www.npmjs.com/package/react-dom) -`v19.0`
 
-### Installation
+### Installation with CLI
+
+You can use our CLI tool to create a new Webcore project, or integrate it into an existing project more easily:
+
+```bash
+# Create a new Webcore project
+npm create webcore@latest
+
+# Update configuration files for an existing Astro project
+npm create webcore@lates config
+
+# Create a new Webcore project with a specific template
+npm create webcore@latest template [TemplateName] [destination]
+
+# Use the "Portfolio" template on the current directory
+npm create webcore@latest template Portfolio
+
+# Create the "Portfolio" template in the "portfolio" directory
+npm create webcore@latest template Portfolio ./portfolio
+```
+
+### Manual Installation
 
 Install Webcore as a dependency by running one of the following command:
 
@@ -87,6 +112,16 @@ yarn add webcoreui
 
 ### Setup
 
+Add the following integration to your Astro configuration file (`astro.config.mjs`) at the root of your project directory:
+
+```js
+import { webcore } from 'webcoreui/integration'
+
+export default defineConfig({
+    integrations: [webcore()]
+})
+```
+
 Create an empty [`webcore.config.scss`](https://webcoreui.dev/docs/css-configuration#webcoreconfigscss) file at the root of your project to setup CSS configurations. Setup default styles and fonts by calling the following in your global SCSS file:
 
 ```scss
@@ -101,7 +136,7 @@ Create an empty [`webcore.config.scss`](https://webcoreui.dev/docs/css-configura
 > [!TIP]
 > You can download the fonts Webcore uses from the [`public/fonts`](https://github.com/Frontendland/webcoreui/tree/main/public/fonts) directory.
 
-The `Setup` mixin can also accept the following options:
+The `setup` mixin can also accept the following options:
 
 
 | Property  | Default value | Purpose |

package/components/ContextMenu/ContextMenu.astro

@@ -61,8 +61,9 @@ if (!Astro.slots.has('context')) {
             on(ctx, 'contextmenu', (event: MouseEvent) => {
                 event.preventDefault()
 
+                const target = event.currentTarget as HTMLElement
+
                 if (!contents[i]) {
-                    const target = event.currentTarget as HTMLElement
                     contents[i] = target.lastElementChild as HTMLDivElement
                 }
 
@@ -74,8 +75,12 @@ if (!Astro.slots.has('context')) {
                     })
                 }
 
-                contents[i].style.top = `${event.offsetY}px`
-                contents[i].style.left = `${event.offsetX}px`
+                const rect = target.getBoundingClientRect()
+                const x = event.clientX - rect.left
+                const y = event.clientY - rect.top
+
+                contents[i].style.top = `${y}px`
+                contents[i].style.left = `${x}px`
                 contents[i].dataset.show = 'true'
             })
         })

package/components/ContextMenu/ContextMenu.svelte

@@ -24,8 +24,13 @@
         event.preventDefault()
 
         if (content) {
-            content.style.top = `${event.offsetY}px`
-            content.style.left = `${event.offsetX}px`
+            const target = event.currentTarget as HTMLElement
+            const rect = target.getBoundingClientRect()
+            const x = event.clientX - rect.left
+            const y = event.clientY - rect.top
+
+            content.style.top = `${y}px`
+            content.style.left = `${x}px`
             content.dataset.show = 'true'
         }
     }

package/components/ContextMenu/ContextMenu.tsx

@@ -24,8 +24,13 @@ const ContextMenu = ({
         event.preventDefault()
 
         if (content.current) {
-            content.current.style.top = `${event.offsetY}px`
-            content.current.style.left = `${event.offsetX}px`
+            const target = event.currentTarget as HTMLElement
+            const rect = target.getBoundingClientRect()
+            const x = event.clientX - rect.left
+            const y = event.clientY - rect.top
+
+            content.current.style.top = `${y}px`
+            content.current.style.left = `${x}px`
             content.current.dataset.show = 'true'
         }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "1.1.0-beta.3",
+    "version": "1.1.0",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",

package/utils/webcore.ts

@@ -1,28 +0,0 @@
-import type { AstroIntegration } from 'astro'
-import path from 'path'
-
-export const webcore = (): AstroIntegration => {
-    return {
-        name: 'webcoreui',
-        hooks: {
-            'astro:config:setup': ({ updateConfig }) => {
-                updateConfig({
-                    vite: {
-                        ssr: {
-                            noExternal: ['webcoreui']
-                        },
-                        css: {
-                            preprocessorOptions: {
-                                scss: {
-                                    loadPaths: [
-                                        path.resolve(process.cwd())
-                                    ]
-                                }
-                            }
-                        }
-                    }
-                })
-            }
-        }
-    }
-}