dars-framework 1.2.3__py3-none-any.whl

dars/templates/examples/basic/Forms/simple_form.py

@@ -0,0 +1,379 @@
+#!/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
+
+if __name__ == '__main__':
+    app.rTimeCompile()

dars/templates/examples/basic/HelloWorld/hello_world.py

@@ -0,0 +1,56 @@
+from dars.all import *
+
+app = App(title="Hello World", theme="dark")
+# Crear componentes
+index = Page(
+    Text(
+        text="Hello World",
+        style={
+            'font-size': '48px',
+            'color': '#2c3e50',
+            'margin-bottom': '20px',
+            'font-weight': 'bold',
+            'text-align': 'center'
+        }
+    ),
+    Text(
+        text="Hello World",
+        style={
+            'font-size': '20px',
+            'color': '#7f8c8d',
+            'margin-bottom': '40px',
+            'text-align': 'center'
+        }
+    ),
+
+    Button(
+        text="Click Me!",
+        on_click= dScript("alert('Hello World')"),
+        on_mouse_enter=dScript("this.style.backgroundColor = '#2980b9';"),
+        on_mouse_leave=dScript("this.style.backgroundColor = '#3498db';"),
+        style={
+            'background-color': '#3498db',
+            'color': 'white',
+            'padding': '15px 30px',
+            'border': 'none',
+            'border-radius': '8px',
+            'font-size': '18px',
+            'cursor': 'pointer',
+            'transition': 'background-color 0.3s'
+        }
+    ),
+    style={
+        'display': 'flex',
+        'flex-direction': 'column',
+        'align-items': 'center',
+        'justify-content': 'center',
+        'min-height': '100vh',
+        'background-color': '#f0f2f5',
+        'font-family': 'Arial, sans-serif'
+    }
+) 
+index.attr()
+app.add_page("index", index, title="Hello World", index=True)
+
+if __name__ == "__main__":
+    app.rTimeCompile()

dars/templates/examples/basic/Layouts/flex_layout_responsive.py

@@ -0,0 +1,13 @@
+from dars.all import App, FlexLayout, Button, Text, Image, AnchorPoint
+
+app = App(title="FlexLayout Responsive Example")
+
+flex = FlexLayout(direction="row", wrap="wrap", gap="2vw", justify="center", align="center")
+flex.add_child(Text("Start"), anchor="left")
+flex.add_child(Button("Center"), anchor="center")
+flex.add_child(Image(src="https://placehold.co/120x120", alt="Demo", style={"width": "100%"}), anchor=AnchorPoint(x="right", y="bottom"))
+
+app.set_root(flex)
+
+if __name__ == '__main__':
+    app.rTimeCompile()

dars/templates/examples/basic/Layouts/grid_layout_responsive.py

@@ -0,0 +1,12 @@
+from dars.all import App, GridLayout, Button, Text, Image, AnchorPoint
+
+app = App(title="GridLayout Responsive Example")
+
+grid = GridLayout(rows=2, cols=2, gap="2vw")
+grid.add_child(Text("Top Left"), row=0, col=0, anchor="top-left")
+grid.add_child(Button("Center"), row=0, col=1, anchor="center")
+grid.add_child(Image(src="https://placehold.co/120x120", alt="Demo", style={"width": "100%"}), row=1, col=0, col_span=2, anchor=AnchorPoint(x="center", y="bottom"))
+
+app.set_root(grid)
+if __name__ == '__main__':
+    app.rTimeCompile()

dars/templates/examples/basic/Layouts/layout_multipage_demo.py

@@ -0,0 +1,23 @@
+from dars.all import App, Page, GridLayout, FlexLayout, Button, Text, Image
+
+app = App(title="Multipage Layout Demo")
+
+# Página 1: Grid responsive
+page1_grid = GridLayout(rows=2, cols=2, gap="2vw")
+page1_grid.add_child(Text("Grid Top Left"), row=0, col=0, anchor="top-left")
+page1_grid.add_child(Button("Grid Center"), row=0, col=1, anchor="center")
+page1_grid.add_child(Image(src="https://placehold.co/120x120", alt="Demo", style={"width": "100%"}), row=1, col=0, col_span=2, anchor="bottom")
+page1 = Page(page1_grid)
+
+# Página 2: Flex responsive
+page2_flex = FlexLayout(direction="row", wrap="wrap", gap="2vw", justify="center", align="center")
+page2_flex.add_child(Text("Flex Start"), anchor="left")
+page2_flex.add_child(Button("Flex Center"), anchor="center")
+page2_flex.add_child(Image(src="https://placehold.co/120x120", alt="Demo", style={"width": "100%"}), anchor="right")
+page2 = Page(page2_flex)
+
+app.add_page("grid", page1, title="Grid Page", index=True)
+app.add_page("flex", page2, title="Flex Page")
+
+if __name__ == '__main__':
+    app.rTimeCompile()

dars/templates/examples/basic/Multipage/multipage_example.py

@@ -0,0 +1,67 @@
+# 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")
+
+if __name__ == '__main__':
+    app.rTimeCompile()

dars/templates/examples/basic/PWA/pwa_custom_icons.py

@@ -0,0 +1,33 @@
+from dars.core.app import App
+from dars.components.basic import Container, Text, Button
+import os
+from dars.all import *
+
+# Usar los iconos generados por defecto del framework
+ICON_192 = "icon-192x192.png"
+ICON_512 = "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(
+    Text(text="¡Bienvenido a la PWA con iconos personalizados!"),
+    Button(text="Haz clic aquí", on_click=dScript("alert('¡Botón de ejemplo!')")),
+)
+
+if __name__ == '__main__':
+    app.rTimeCompile(add_file_types=".js")

dars/templates/examples/demo/complete_app.py

@@ -0,0 +1,21 @@
+#!/usr/bin/env python3
+"""
+Dars - Aplicación de Demostración Completa
+Una aplicación que demuestra todas las características principales de Dars
+"""
+
+from dars.all import *
+
+# Crear la aplicación con configuración avanzada
+app = App(
+    title="Dars - Demostración Completa",
+    theme="light",
+)
+
+index = Page(
+    Text(text="This template is deprecated. It needs to be updated. Please wait unitil its updated because its too old.")
+)
+
+app.add_page("index", index, index=True)
+if __name__ == '__main__':
+    app.rTimeCompile()