dars-framework 1.0.0__py3-none-any.whl

dars/templates/examples/basic/multipage_example.py

@@ -0,0 +1,70 @@
+# Ejemplo de uso del sistema multipágina de Dars
+from dars.core.app import App
+from dars.components.basic.page import Page
+from dars.components.basic.text import Text
+from dars.components.basic.button import Button
+from dars.scripts.script import InlineScript
+
+# Instancia de la app
+app = App(title="Demo Multipágina Dars", description="Ejemplo de múltiples páginas con Dars")
+
+# Página principal
+home = Page(
+    Text("Bienvenido a la página principal de Dars!"),
+    Button("Ir a Sobre Nosotros", id="btn-about", class_name="dars-btn-link", style={"margin": "16px"})
+)
+# Script solo para la home
+home.add_script(InlineScript("""
+document.addEventListener('DOMContentLoaded', function() {
+    var btn = document.getElementById('btn-about');
+    if (btn) {
+        btn.addEventListener('click', function() {
+            window.location.href = 'about.html';
+        });
+    }
+});
+"""))
+
+about = Page(
+    Text("Sobre Nosotros: Dars es un framework Python para la web."),
+    Button("Volver al inicio", id="btn-home", class_name="dars-btn-link", style={"margin": "16px"})
+)
+about.add_script(InlineScript("""
+document.addEventListener('DOMContentLoaded', function() {
+    var btn = document.getElementById('btn-home');
+    if (btn) {
+        btn.addEventListener('click', function() {
+            window.location.href = 'index.html';
+        });
+    }
+});
+"""))
+
+contact = Page(
+    Text("Contacto: Escríbenos a contacto@dars.dev"),
+    Button("Volver al inicio", id="btn-home2", class_name="dars-btn-link", style={"margin": "16px"})
+)
+contact.add_script(InlineScript("""
+document.addEventListener('DOMContentLoaded', function() {
+    var btn = document.getElementById('btn-home2');
+    if (btn) {
+        btn.addEventListener('click', function() {
+            window.location.href = 'index.html';
+        });
+    }
+});
+"""))
+
+
+# Registro multipágina
+# ¡IMPORTANTE! Nunca pases una lista como root, siempre un solo componente (Container, etc)
+# El exporter ahora también protege automáticamente y envuelve listas en un Container.
+app.add_page("home", home, title="Inicio", index=True)
+app.add_page("about", about, title="Sobre Nosotros")
+app.add_page("contact", contact, title="Contacto")
+
+# También sigue funcionando el modo clásico (single-page):
+#app.set_root(home)
+
+if __name__ == "__main__":
+    app.rTimeCompile()

dars/templates/examples/basic/pwa_custom_icons.py

@@ -0,0 +1,31 @@
+from dars.core.app import App
+from dars.components.basic import Container, Text, Button
+import os
+
+# Usar los iconos generados por defecto del framework
+ICON_192 = os.path.join(os.path.dirname(__file__), 'dars', 'exporters', 'web', 'icons', 'pwa', 'icon-192x192.png')
+ICON_512 = os.path.join(os.path.dirname(__file__), 'dars', 'exporters', 'web', 'icons', 'pwa', 'icon-512x512.png')
+
+app = App(
+    title="Dars PWA Custom Icons Template",
+    description="Template PWA Dars con iconos personalizados",
+    pwa_enabled=True,
+    pwa_name="Dars PWA Custom",
+    pwa_short_name="DarsPWA",
+    theme_color="#1976d2",
+    background_color="#fafafa",
+    pwa_display="standalone",
+    pwa_orientation="portrait",
+    service_worker_enabled=True,
+    icons=[
+        {"src": ICON_192, "sizes": "192x192", "type": "image/png", "purpose": "any maskable"},
+        {"src": ICON_512, "sizes": "512x512", "type": "image/png"}
+    ]
+)
+
+app.root = Container(
+    children=[
+        Text(text="¡Bienvenido a la PWA con iconos personalizados!"),
+        Button(text="Haz clic aquí", on_click=lambda: print("¡Botón de ejemplo!")),
+    ]
+)

dars/templates/examples/basic/simple_form.py

@@ -0,0 +1,377 @@
+#!/usr/bin/env python3
+"""
+Dars - Ejemplo Básico: Formulario Simple
+Demuestra el uso de inputs, validación básica y manejo de eventos
+"""
+
+import sys
+import os
+
+from dars.core.app import App
+from dars.components.basic.text import Text
+from dars.components.basic.button import Button
+from dars.components.basic.input import Input
+from dars.components.basic.container import Container
+from dars.scripts.script import InlineScript
+
+# Crear la aplicación
+app = App(title="Formulario Simple - Dars")
+
+# Contenedor principal
+main_container = Container(
+    style={
+        'display': 'flex',
+        'justify-content': 'center',
+        'align-items': 'center',
+        'min-height': '100vh',
+        'background-color': '#ecf0f1',
+        'font-family': 'Arial, sans-serif'
+    }
+)
+
+# Tarjeta del formulario
+form_card = Container(
+    style={
+        'background-color': 'white',
+        'padding': '40px',
+        'border-radius': '12px',
+        'box-shadow': '0 4px 20px rgba(0,0,0,0.1)',
+        'max-width': '400px',
+        'width': '100%'
+    }
+)
+
+# Título del formulario
+titulo = Text(
+    text="Formulario de Contacto",
+    style={
+        'font-size': '28px',
+        'color': '#2c3e50',
+        'margin-bottom': '30px',
+        'text-align': 'center',
+        'font-weight': 'bold'
+    }
+)
+
+# Campo nombre
+label_nombre = Text(
+    text="Nombre:",
+    style={
+        'font-size': '16px',
+        'color': '#34495e',
+        'margin-bottom': '8px',
+        'font-weight': '500'
+    }
+)
+
+input_nombre = Input(
+    id="campo-nombre",
+    placeholder="Ingresa tu nombre completo",
+    required=True,
+    style={
+        'width': '100%',
+        'padding': '12px',
+        'border': '2px solid #bdc3c7',
+        'border-radius': '6px',
+        'font-size': '16px',
+        'margin-bottom': '20px'
+    }
+)
+
+# Campo email
+label_email = Text(
+    text="Email:",
+    style={
+        'font-size': '16px',
+        'color': '#34495e',
+        'margin-bottom': '8px',
+        'font-weight': '500'
+    }
+)
+
+input_email = Input(
+    id="campo-email",
+    placeholder="tu@email.com",
+    input_type="email",
+    required=True,
+    style={
+        'width': '100%',
+        'padding': '12px',
+        'border': '2px solid #bdc3c7',
+        'border-radius': '6px',
+        'font-size': '16px',
+        'margin-bottom': '20px'
+    }
+)
+
+# Campo mensaje
+label_mensaje = Text(
+    text="Mensaje:",
+    style={
+        'font-size': '16px',
+        'color': '#34495e',
+        'margin-bottom': '8px',
+        'font-weight': '500'
+    }
+)
+
+input_mensaje = Input(
+    id="campo-mensaje",
+    placeholder="Escribe tu mensaje aquí...",
+    style={
+        'width': '100%',
+        'padding': '12px',
+        'border': '2px solid #bdc3c7',
+        'border-radius': '6px',
+        'font-size': '16px',
+        'margin-bottom': '30px',
+        'min-height': '100px'
+    }
+)
+
+# Botones
+button_container = Container(
+    style={
+        'display': 'flex',
+        'gap': '15px',
+        'justify-content': 'center'
+    }
+)
+
+boton_enviar = Button(
+    id="boton-enviar",
+    text="Enviar",
+    style={
+        'background-color': '#27ae60',
+        'color': 'white',
+        'padding': '12px 24px',
+        'border': 'none',
+        'border-radius': '6px',
+        'font-size': '16px',
+        'cursor': 'pointer',
+        'font-weight': '500'
+    }
+)
+
+boton_limpiar = Button(
+    id="boton-limpiar",
+    text="Limpiar",
+    style={
+        'background-color': '#95a5a6',
+        'color': 'white',
+        'padding': '12px 24px',
+        'border': 'none',
+        'border-radius': '6px',
+        'font-size': '16px',
+        'cursor': 'pointer',
+        'font-weight': '500'
+    }
+)
+
+# Script para funcionalidad
+script = InlineScript("""
+// Variables globales
+let formularioValido = false;
+
+// Funciones de validación
+function validarNombre(nombre) {
+    return nombre.trim().length >= 2;
+}
+
+function validarEmail(email) {
+    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return regex.test(email);
+}
+
+function validarMensaje(mensaje) {
+    return mensaje.trim().length >= 10;
+}
+
+// Mostrar/ocultar mensajes de error
+function mostrarError(campo, mensaje) {
+    limpiarError(campo);
+    
+    const error = document.createElement('div');
+    error.className = 'error-mensaje';
+    error.textContent = mensaje;
+    error.style.color = '#e74c3c';
+    error.style.fontSize = '14px';
+    error.style.marginTop = '5px';
+    
+    campo.parentNode.insertBefore(error, campo.nextSibling);
+    campo.style.borderColor = '#e74c3c';
+}
+
+function limpiarError(campo) {
+    const error = campo.parentNode.querySelector('.error-mensaje');
+    if (error) {
+        error.remove();
+    }
+    campo.style.borderColor = '#bdc3c7';
+}
+
+function mostrarExito(campo) {
+    limpiarError(campo);
+    campo.style.borderColor = '#27ae60';
+}
+
+// Validar formulario completo
+function validarFormulario() {
+    const nombre = document.getElementById('campo-nombre').value;
+    const email = document.getElementById('campo-email').value;
+    const mensaje = document.getElementById('campo-mensaje').value;
+    
+    let esValido = true;
+    
+    // Validar nombre
+    if (!validarNombre(nombre)) {
+        mostrarError(document.getElementById('campo-nombre'), 'El nombre debe tener al menos 2 caracteres');
+        esValido = false;
+    } else {
+        mostrarExito(document.getElementById('campo-nombre'));
+    }
+    
+    // Validar email
+    if (!validarEmail(email)) {
+        mostrarError(document.getElementById('campo-email'), 'Ingresa un email válido');
+        esValido = false;
+    } else {
+        mostrarExito(document.getElementById('campo-email'));
+    }
+    
+    // Validar mensaje
+    if (!validarMensaje(mensaje)) {
+        mostrarError(document.getElementById('campo-mensaje'), 'El mensaje debe tener al menos 10 caracteres');
+        esValido = false;
+    } else {
+        mostrarExito(document.getElementById('campo-mensaje'));
+    }
+    
+    return esValido;
+}
+
+// Enviar formulario
+function enviarFormulario() {
+    if (validarFormulario()) {
+        const botonEnviar = document.getElementById('boton-enviar');
+        const textoOriginal = botonEnviar.textContent;
+        
+        // Simular envío
+        botonEnviar.textContent = 'Enviando...';
+        botonEnviar.disabled = true;
+        botonEnviar.style.backgroundColor = '#95a5a6';
+        
+        setTimeout(() => {
+            alert('¡Formulario enviado correctamente!\\n\\nGracias por contactarnos.');
+            limpiarFormulario();
+            
+            botonEnviar.textContent = textoOriginal;
+            botonEnviar.disabled = false;
+            botonEnviar.style.backgroundColor = '#27ae60';
+        }, 2000);
+    }
+}
+
+// Limpiar formulario
+function limpiarFormulario() {
+    document.getElementById('campo-nombre').value = '';
+    document.getElementById('campo-email').value = '';
+    document.getElementById('campo-mensaje').value = '';
+    
+    // Limpiar errores
+    const campos = ['campo-nombre', 'campo-email', 'campo-mensaje'];
+    campos.forEach(id => {
+        const campo = document.getElementById(id);
+        limpiarError(campo);
+    });
+}
+
+// Configurar eventos
+document.addEventListener('DOMContentLoaded', function() {
+    // Eventos de botones
+    document.getElementById('boton-enviar').addEventListener('click', enviarFormulario);
+    document.getElementById('boton-limpiar').addEventListener('click', limpiarFormulario);
+    
+    // Validación en tiempo real
+    document.getElementById('campo-nombre').addEventListener('blur', function() {
+        if (this.value.trim()) {
+            if (validarNombre(this.value)) {
+                mostrarExito(this);
+            } else {
+                mostrarError(this, 'El nombre debe tener al menos 2 caracteres');
+            }
+        }
+    });
+    
+    document.getElementById('campo-email').addEventListener('blur', function() {
+        if (this.value.trim()) {
+            if (validarEmail(this.value)) {
+                mostrarExito(this);
+            } else {
+                mostrarError(this, 'Ingresa un email válido');
+            }
+        }
+    });
+    
+    document.getElementById('campo-mensaje').addEventListener('blur', function() {
+        if (this.value.trim()) {
+            if (validarMensaje(this.value)) {
+                mostrarExito(this);
+            } else {
+                mostrarError(this, 'El mensaje debe tener al menos 10 caracteres');
+            }
+        }
+    });
+    
+    // Limpiar errores al escribir
+    const campos = ['campo-nombre', 'campo-email', 'campo-mensaje'];
+    campos.forEach(id => {
+        document.getElementById(id).addEventListener('input', function() {
+            if (this.style.borderColor === 'rgb(231, 76, 60)') { // Color de error
+                limpiarError(this);
+            }
+        });
+    });
+    
+    // Efectos hover en botones
+    const botones = [document.getElementById('boton-enviar'), document.getElementById('boton-limpiar')];
+    
+    document.getElementById('boton-enviar').addEventListener('mouseenter', function() {
+        if (!this.disabled) this.style.backgroundColor = '#229954';
+    });
+    
+    document.getElementById('boton-enviar').addEventListener('mouseleave', function() {
+        if (!this.disabled) this.style.backgroundColor = '#27ae60';
+    });
+    
+    document.getElementById('boton-limpiar').addEventListener('mouseenter', function() {
+        this.style.backgroundColor = '#7f8c8d';
+    });
+    
+    document.getElementById('boton-limpiar').addEventListener('mouseleave', function() {
+        this.style.backgroundColor = '#95a5a6';
+    });
+});
+""")
+
+# Ensamblar la aplicación
+button_container.add_child(boton_enviar)
+button_container.add_child(boton_limpiar)
+
+form_card.add_child(titulo)
+form_card.add_child(label_nombre)
+form_card.add_child(input_nombre)
+form_card.add_child(label_email)
+form_card.add_child(input_email)
+form_card.add_child(label_mensaje)
+form_card.add_child(input_mensaje)
+form_card.add_child(button_container)
+
+main_container.add_child(form_card)
+
+app.set_root(main_container)
+app.add_script(script)
+
+# Para exportar esta aplicación, ejecuta:
+# ./dars_exporter export examples/basic/simple_form.py --format html --output ./simple_form_output
+