@dile/ui 2.18.3 → 2.20.0

package/components/copy-markdown-url/README.md

@@ -0,0 +1,87 @@
+# dile-copy-markdown-url
+
+Un componente Web que permite copiar el contenido de una URL al portapapeles. Reutiliza el componente `dile-copy-text` y usa fetch para obtener el contenido de la URL de forma simple y eficiente.
+
+## Instalación
+
+```bash
+npm install @dile/ui
+```
+
+## Importación
+
+```javascript
+import '@dile/ui/components/copy-markdown-url/copy-markdown-url.js';
+```
+
+## Uso
+
+```html
+<dile-copy-markdown-url 
+  url="https://ejemplo.com/archivo.md"
+>
+  Copiar markdown
+</dile-copy-markdown-url>
+```
+
+## Propiedades
+
+- **url** (String): La URL del contenido a copiar
+- **copiedDuration** (Number): Duración en milisegundos del feedback de copia (por defecto: 1000)
+- **feedbackText** (String): Texto del feedback visual (por defecto: 'Copied!')
+- **hideIcon** (Boolean): Ocultar el icono en el feedback (por defecto: false)
+
+## Eventos
+
+Hereda todos los eventos de `dile-copy-text`:
+
+- **dile-text-copied**: Se dispara cuando el contenido se ha copiado correctamente
+  - `detail.text`: El contenido que se copió
+
+Además, dispara:
+
+- **dile-copy-markdown-url-error**: Se dispara cuando hay un error al obtener el contenido de la URL
+  - `detail.message`: Descripción del error
+
+## Estilos CSS personalizables
+
+El componente hereda los estilos de `dile-copy-text`, así que puedes usar las mismas variables CSS:
+
+- `--dile-copy-text-text-decoration`: Decoración del texto del enlace (por defecto: none)
+- `--dile-copy-text-color`: Color del texto del enlace (por defecto: inherit)
+- `--dile-copy-text-transition-duration`: Duración de la transición (por defecto: 0.3s)
+- `--dile-copy-text-hover-color`: Color del texto al hacer hover (por defecto: #0066cc)
+- `--dile-copy-text-hover-text-decoration`: Decoración al hacer hover (por defecto: underline)
+- `--dile-copy-text-focus-outline`: Contorno al tener enfoque (por defecto: 2px solid #0066cc)
+
+## Ejemplo completo
+
+```html
+<dile-copy-markdown-url 
+  url="https://raw.githubusercontent.com/user/repo/main/README.md"
+  feedbackText="¡Markdown copiado!"
+  copiedDuration="2000"
+>
+  📋 Copiar README
+</dile-copy-markdown-url>
+
+<script type="module">
+  const copyBtn = document.querySelector('dile-copy-markdown-url');
+  
+  copyBtn.addEventListener('dile-text-copied', (e) => {
+    console.log('Contenido copiado:', e.detail.text);
+  });
+  
+  copyBtn.addEventListener('dile-copy-markdown-url-error', (e) => {
+    console.error('Error:', e.detail.message);
+  });
+</script>
+```
+
+## Comportamiento
+
+1. El usuario hace click en el componente
+2. Si es la primera vez, el componente hace un fetch a la URL especificada
+3. Una vez obtiene el contenido, automáticamente lo copia al portapapeles
+4. Se muestra un feedback visual indicando que el contenido se copió
+5. En los siguientes clicks, el contenido ya está cacheado y se copia directamente

package/components/copy-markdown-url/copy-markdown-url.js

@@ -0,0 +1,3 @@
+import { DileCopyMarkdownUrl } from "./index.js";
+
+export { DileCopyMarkdownUrl };

package/components/copy-markdown-url/index.js

@@ -0,0 +1,5 @@
+import { DileCopyMarkdownUrl } from './src/DileCopyMarkdownUrl.js';
+
+window.customElements.define('dile-copy-markdown-url', DileCopyMarkdownUrl);
+
+export { DileCopyMarkdownUrl };

package/components/copy-markdown-url/src/DileCopyMarkdownUrl.js

@@ -0,0 +1,99 @@
+import { LitElement, html } from 'lit';
+import '../../copy-text/copy-text.js';
+
+export class DileCopyMarkdownUrl extends LitElement {
+  static get properties() {
+    return {
+      url: { type: String },
+      copiedDuration: { type: Number },
+      feedbackText: { type: String },
+      hideIcon: { type: Boolean },
+      loading: { type: Boolean, state: true },
+      error: { type: String, state: true },
+      content: { type: String, state: true }
+    };
+  }
+
+  constructor() {
+    super();
+    this.url = '';
+    this.copiedDuration = 1000;
+    this.feedbackText = 'Copied!';
+    this.hideIcon = false;
+    this.loading = false;
+    this.error = null;
+    this.content = '';
+  }
+
+  render() {
+    return html`
+      <dile-copy-text
+        id="copy-component"
+        .content="${this.content}"
+        .feedbackText="${this.feedbackText}"
+        .copiedDuration="${this.copiedDuration}"
+        ?hideIcon="${this.hideIcon}"
+        @click="${this.handleClick}"
+      >
+        <slot></slot>
+      </dile-copy-text>
+    `;
+  }
+
+  async handleClick(e) {
+    if (this.loading) {
+      e.preventDefault();
+      return;
+    }
+
+    if (!this.content && this.url) {
+      e.preventDefault();
+      await this.fetchContent();
+      
+      // After fetching, trigger copy on the component using its public API
+      const copyComponent = this.shadowRoot.querySelector('#copy-component');
+      if (copyComponent && this.content) {
+        await copyComponent.copy();
+      }
+    }
+  }
+
+  async fetchContent() {
+    if (!this.url) {
+      this.error = 'URL is not set';
+      this.dispatchEvent(
+        new CustomEvent('dile-copy-markdown-url-error', {
+          detail: { message: this.error },
+          bubbles: true,
+          composed: true
+        })
+      );
+      return;
+    }
+
+    this.loading = true;
+    this.error = null;
+
+    try {
+      const response = await fetch(this.url);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      this.content = await response.text();
+    } catch (err) {
+      this.error = err.message || 'Error fetching content';
+      
+      this.dispatchEvent(
+        new CustomEvent('dile-copy-markdown-url-error', {
+          detail: { message: this.error },
+          bubbles: true,
+          composed: true
+        })
+      );
+    } finally {
+      this.loading = false;
+    }
+  }
+}

package/components/copy-text/src/DileCopyText.js

@@ -30,7 +30,7 @@ export class DileCopyText extends LitElement {
 
   static get properties() {
     return {
-      copy: { type: String },
+      content: { type: String },
       copiedDuration: { type: Number },
       feedbackText: { type: String },
       hideIcon: { type: Boolean }
@@ -39,7 +39,7 @@ export class DileCopyText extends LitElement {
 
   constructor() {
     super();
-    this.copy = '';
+    this.content = '';
     this.copiedDuration = 1000; // 2 seconds by default
     this.feedbackText = 'Copied!';
     this.hideIcon = false;
@@ -47,22 +47,23 @@ export class DileCopyText extends LitElement {
 
   render() {
     return html`
-      <a
-        href="#"
-        role="button"
-        tabindex="0"
-        @click="${this.handleCopy}"
-        @keydown="${this.handleKeydown}"
-      >
-        <slot></slot>
-      </a>
       <dile-floating-feedback
         id="copy-feedback"
         feedback="${this.feedbackText}"
         duration="${this.copiedDuration}"
         ?hideIcon=${this.hideIcon}
         .icon=${contentCopyIcon}
-      ></dile-floating-feedback>
+      >
+        <a
+          href="#"
+          role="button"
+          tabindex="0"
+          @click="${this.handleCopy}"
+          @keydown="${this.handleKeydown}"
+        >
+          <slot></slot>
+        </a>
+      </dile-floating-feedback>
     `;
   }
 
@@ -82,7 +83,7 @@ export class DileCopyText extends LitElement {
     try {
       // Try to use Clipboard API first (modern browsers)
       if (navigator.clipboard && navigator.clipboard.writeText) {
-        await navigator.clipboard.writeText(this.copy);
+        await navigator.clipboard.writeText(this.content);
       } else {
         // Fallback for older browsers
         this.copyWithExecCommand();
@@ -91,7 +92,7 @@ export class DileCopyText extends LitElement {
       // Dispatch custom event
       this.dispatchEvent(
         new CustomEvent('dile-text-copied', {
-          detail: { text: this.copy },
+          detail: { text: this.content },
           bubbles: true,
           composed: true
         })
@@ -106,7 +107,7 @@ export class DileCopyText extends LitElement {
         this.copyWithExecCommand();
         this.dispatchEvent(
           new CustomEvent('dile-text-copied', {
-            detail: { text: this.copy },
+            detail: { text: this.content },
             bubbles: true,
             composed: true
           })
@@ -120,7 +121,7 @@ export class DileCopyText extends LitElement {
 
   copyWithExecCommand() {
     const textArea = document.createElement('textarea');
-    textArea.value = this.copy;
+    textArea.value = this.content;
     textArea.style.position = 'fixed';
     textArea.style.left = '-999999px';
     textArea.style.top = '-999999px';
@@ -140,4 +141,8 @@ export class DileCopyText extends LitElement {
       feedback.show();
     }
   }
+
+  async copy() {
+    await this.copyToClipboard();
+  }
 }

package/components/floating-feedback/src/DileFloatingFeedback.js

@@ -35,7 +35,7 @@ export class DileFloatingFeedback extends LitElement {
 
   render() {
     return html`
-      <div class="feedback-anchor"></div>
+      <slot class="feedback-anchor"></slot>
     `;
   }
 
@@ -116,8 +116,15 @@ export class DileFloatingFeedback extends LitElement {
     // Add content container to floating element
     floatingElement.appendChild(contentContainer);
 
-    // Calculate position relative to this component
-    const rect = this.getBoundingClientRect();
+    // Calculate position relative to the slot's content
+    const anchorElement = this.children[0];
+    if (!anchorElement) {
+      console.warn('dile-floating-feedback: No element in slot to anchor to');
+      floatingElement.remove();
+      return;
+    }
+    
+    const rect = anchorElement.getBoundingClientRect();
     const x = rect.left + rect.width / 2;
     const y = rect.top;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.18.3",
+  "version": "2.20.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5a5d851418d9a02f6cf24e937005ee9361085678"
+  "gitHead": "cd0b6acfaed41004ccd714f0ad586bc66b303479"
 }