npm - @8wave/ai-elements - Versions diffs - 0.0.1-beta.1 - Mend

@8wave/ai-elements 0.0.1-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/README.md +291 -0
package/package.json +38 -0

package/README.md ADDED Viewed

@@ -0,0 +1,291 @@
+# Web Component App
+Applicazione per creare Web Components (Custom Elements) usando Vue 3.
+## 📋 Descrizione
+Questa app permette di creare custom elements nativi del browser usando Vue 3. I componenti sono completamente autonomi e possono essere usati in qualsiasi progetto HTML, indipendentemente dal framework utilizzato.
+## 🚀 Caratteristiche
+- ✅ Web Components nativi del browser
+- ✅ Costruiti con Vue 3
+- ✅ Shadow DOM per incapsulamento degli stili
+- ✅ Props reattive tramite attributi HTML
+- ✅ Eventi custom personalizzati
+- ✅ Bundle ottimizzato (ES modules e UMD)
+- ✅ TypeScript support
+## 📦 Struttura
+```
+web-component/
+├── src/
+│   ├── main.ts                 # Entry point - registra i custom elements
+│   ├── MyElement.ce.vue        # Esempio di custom element
+│   └── vite-env.d.ts          # Type definitions
+├── index.html                  # Pagina demo per testare i componenti
+├── package.json
+├── tsconfig.json
+└── vite.config.ts             # Configurazione Vite per custom elements
+```
+## 🛠️ Setup
+### Installazione dipendenze
+Dalla root del monorepo:
+```bash
+pnpm install
+```
+### Sviluppo
+```bash
+# Dalla root del monorepo
+pnpm --filter web-component dev
+# Oppure
+cd apps/web-component
+pnpm dev
+```
+Questo avvierà un server di sviluppo su `http://localhost:8082` con la pagina di demo.
+### Build
+```bash
+# Dalla root del monorepo
+pnpm --filter web-component build
+# Oppure
+cd apps/web-component
+pnpm build
+```
+Questo genererà i file ottimizzati nella cartella `dist/`:
+- `web-components.es.js` - ES modules (raccomandato)
+- `web-components.umd.js` - UMD format (per compatibilità legacy)
+## 📖 Come creare un nuovo Custom Element
+### 1. Crea un componente Vue con estensione `.ce.vue`
+```vue
+<!-- src/NewElement.ce.vue -->
+<template>
+    <div class="new-element">
+        <h3>{{ title }}</h3>
+        <slot></slot>
+    </div>
+</template>
+<script setup lang="ts">
+import { toRefs } from 'vue'
+const props = defineProps<{
+    title?: string
+}>()
+const { title = 'Default Title' } = toRefs(props)
+</script>
+<style scoped>
+.new-element {
+    padding: 20px;
+    border: 1px solid #ccc;
+}
+</style>
+```
+### 2. Registra il custom element in `main.ts`
+```typescript
+import { defineCustomElement } from 'vue'
+import NewElement from './NewElement.ce.vue'
+const NewElementCE = defineCustomElement(NewElement)
+customElements.define('new-element', NewElementCE)
+export { NewElementCE }
+```
+### 3. Usa il custom element in HTML
+```html
+<script type="module" src="./dist/web-components.es.js"></script>
+<new-element title="Hello World">
+    Questo è il contenuto dello slot
+</new-element>
+```
+## 🎯 Uso nei Progetti
+### In un progetto HTML statico
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>My App</title>
+</head>
+<body>
+    <!-- Usa il custom element -->
+    <my-element
+        title="Benvenuto"
+        message="Questo è un web component!">
+    </my-element>
+    <!-- Importa il bundle -->
+    <script type="module" src="./web-components.es.js"></script>
+</body>
+</html>
+```
+### In React
+```jsx
+import { useEffect } from 'react';
+function App() {
+    useEffect(() => {
+        // Importa il web component
+        import('./web-components.es.js');
+    }, []);
+    return (
+        <div>
+            <my-element
+                title="From React"
+                message="Web component in React!"
+            />
+        </div>
+    );
+}
+```
+### In Angular
+```typescript
+// app.module.ts
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+@NgModule({
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule { }
+```
+```html
+<!-- app.component.html -->
+<my-element
+    [title]="'From Angular'"
+    [message]="'Web component in Angular!'">
+</my-element>
+```
+```typescript
+// app.component.ts
+import './web-components.es.js';
+```
+## 🎨 Styling
+Gli stili definiti nei componenti `.ce.vue` sono incapsulati nel Shadow DOM. Per sovrascriverli dall'esterno, puoi usare CSS custom properties (variabili CSS):
+```vue
+<!-- Nel componente -->
+<style scoped>
+.my-element {
+    background-color: var(--my-element-bg, #f9f9f9);
+    color: var(--my-element-color, #333);
+}
+</style>
+```
+```css
+/* Nel CSS esterno */
+my-element {
+    --my-element-bg: #e0e0e0;
+    --my-element-color: #000;
+}
+```
+## 📡 Eventi
+I custom elements possono emettere eventi personalizzati:
+```vue
+<!-- Nel componente -->
+<script setup lang="ts">
+const emit = defineEmits<{
+    customEvent: [data: string]
+}>()
+const handleClick = () => {
+    emit('customEvent', 'Hello from custom element!')
+}
+</script>
+```
+```javascript
+// Nel JavaScript esterno
+const element = document.querySelector('my-element');
+element.addEventListener('customEvent', (event) => {
+    console.log(event.detail); // ['Hello from custom element!']
+});
+```
+## 🔧 Configurazione Avanzata
+### Vite Config
+La configurazione in `vite.config.ts` è ottimizzata per la build di custom elements:
+- **`customElement: true`**: Abilita la modalità custom element in Vue
+- **Library mode**: Crea un bundle ottimizzato per il riutilizzo
+- **Multiple formats**: Genera sia ES modules che UMD
+### TypeScript
+Il progetto usa TypeScript con configurazione estesa da `tsconfig/tsconfig.vite.json` del monorepo.
+## 📚 Risorse
+- [Vue 3 - Web Components](https://it.vuejs.org/guide/extras/web-components.html)
+- [MDN - Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
+- [Vite - Library Mode](https://vitejs.dev/guide/build.html#library-mode)
+## 🐛 Troubleshooting
+### Il componente non si registra
+Assicurati che il nome del custom element contenga un trattino (`-`):
+```typescript
+// ✅ Corretto
+customElements.define('my-element', MyElementCE)
+// ❌ Errato (manca il trattino)
+customElements.define('myelement', MyElementCE)
+```
+### Gli stili non vengono applicati
+Verifica che:
+1. Gli stili siano definiti nel componente `.ce.vue`
+2. Il tag `<style scoped>` sia presente
+3. Gli stili non siano in conflitto con il CSS della pagina host
+### Eventi non ricevuti
+Assicurati di:
+1. Emettere eventi con `emit()`
+2. Ascoltare eventi dopo che il DOM è caricato
+3. Usare `event.detail` per accedere ai dati dell'evento
+## 📄 Licenza
+Questo progetto fa parte del monorepo 8bot-ai e segue la stessa licenza.

package/package.json ADDED Viewed

@@ -0,0 +1,38 @@
+{
+    "name": "@8wave/ai-elements",
+    "private": false,
+    "version": "0.0.1-beta.1",
+    "type": "module",
+    "scripts": {
+        "dev": "vite --port 8082 --open --host",
+        "build": "vite build",
+        "build:lib": "vite build --mode lib",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "ability": "workspace:*",
+        "auth": "workspace:*",
+        "components": "workspace:*",
+        "composables": "workspace:*",
+        "i18n": "workspace:*",
+        "icons": "workspace:*",
+        "models": "workspace:*",
+        "style": "workspace:*",
+        "vue": "^3.5.28"
+    },
+    "devDependencies": {
+        "@intlify/unplugin-vue-i18n": "^11.0.3",
+        "@nabla/vite-plugin-eslint": "^2.0.6",
+        "@vitejs/plugin-vue": "^6.0.4",
+        "tsconfig": "workspace:*",
+        "typescript": "^5.9.3",
+        "unplugin-auto-import": "^21.0.0",
+        "unplugin-vue-components": "^31.0.0",
+        "vite": "^7.3.1",
+        "vite-plugin-stylelint": "^6.0.4",
+        "vite-plugin-webfont-dl": "^3.12.0"
+    },
+    "files": [
+        "dist"
+    ]
+}