dars-framework 1.1.2__tar.gz → 1.1.3__tar.gz

{dars_framework-1.1.2/dars_framework.egg-info → dars_framework-1.1.3}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: dars-framework
-Version: 1.1.2
+Version: 1.1.3
 Summary: Dars is a Python UI framework for building modern, interactive web apps with only Python code. Write your interface in Python, export it to static HTML/CSS/JS, and deploy anywhere.
 Author-email: ztamdev <zondax2009@gmail.com>
 License: MIT License

{dars_framework-1.1.2 → dars_framework-1.1.3}/dars/cli/main.py

@@ -368,7 +368,6 @@ class DarsExporter:
         info_table.add_row(translator.get('scripts'), str(stats['scripts_count']))
         info_table.add_row(translator.get('global_styles'), str(stats['global_styles_count']))
         info_table.add_row(translator.get('theme'), app.config.get('theme', 'light'))
-        info_table.add_row(translator.get('responsive'), str(app.config.get('responsive', True)))
         
         console.print(info_table)
         

{dars_framework-1.1.2 → dars_framework-1.1.3}/dars/cli/translations.py

@@ -17,6 +17,8 @@ translations = {
         'info_help': "Show application information",
         'formats_help': "Show supported formats",
         'preview_help': "Preview information",
+        'property_column': "Property",
+        'value_column': "Value",
         'preview_cmd_help': "Preview exported application",
         'init_help': "Create a Dars project",
         'template_not_found': "Template '{template}' not found",
@@ -171,6 +173,8 @@ translations = {
         'preview_help': "Información de preview",
         'preview_cmd_help': "Previsualizar aplicación exportada",
         'init_help': "Crea un proyecto Dars",
+        'property_column': "Propiedad",
+        'value_column': "Valor",
         
         # Export command
         'file_help': "Archivo Python con la aplicación Dars",

{dars_framework-1.1.2 → dars_framework-1.1.3}/dars/core/app.py

@@ -127,7 +127,7 @@ class Page:
 class App:
     """Main class that represents a Dars application"""
 
-    def rTimeCompile(self, exporter=None, port=None, add_file_types=".py, .js, .css"):
+    def rTimeCompile(self, exporter=None, port=None, add_file_types=".py, .js, .css", watchfiledialog=False):
         """
         Generates a quick preview of the app on a local server using an exporter  
         (default: HTMLCSSJSExporter) and serving the files from a temporary directory.  
@@ -145,6 +145,8 @@ class App:
         import shutil
         import traceback
 
+        self.watchfiledialog = watchfiledialog
+
         @contextmanager
         def pushd(path):
             """Cambia temporalmente el cwd y lo restaura al salir."""
@@ -425,11 +427,13 @@ class App:
                         subtitle=f"Project root: {os.path.basename(project_root)}",
                         border_style="magenta"
                     )
-                    console.print(panel)
+                    if self.watchfiledialog:
+                        console.print(panel)
                 else:
-                    print(f"[Dars] Watching {len(files_to_watch)} files in {project_root}:")
-                    for f in files_to_watch:
-                        print("  -", os.path.relpath(f, project_root))
+                    if self.watchfiledialog:
+                        print(f"[Dars] Watching {len(files_to_watch)} files in {project_root}:")
+                        for f in files_to_watch:
+                            print("  -", os.path.relpath(f, project_root))
 
                 # Loop principal: espera a Ctrl+C
                 while not shutdown_event.is_set():

{dars_framework-1.1.2 → dars_framework-1.1.3}/dars/docs/app.md

@@ -27,6 +27,118 @@ class App:
     ):
 ```
 
+## Global Styles Management
+
+### Enhanced add_global_style() Method
+
+The `App` class now includes an enhanced `add_global_style()` method that supports both inline style definitions and external CSS file imports.
+
+
+#### Usage Examples
+
+**1. Inline Style Definition (Traditional)**
+```python
+app.add_global_style(
+    selector=".my-button",
+    styles={
+        "background-color": "#4CAF50",
+        "color": "white",
+        "padding": "10px 20px",
+        "border-radius": "5px"
+    }
+)
+```
+
+**2. External CSS File Import (New in v1.1.2)**
+```python
+app.add_global_style(file_path="styles.css")
+```
+
+**3. Combined Usage**
+```python
+# Add inline styles
+app.add_global_style(
+    selector=".primary-btn",
+    styles={
+        "background-color": "#007bff",
+        "color": "white"
+    }
+)
+
+# Import external CSS file
+app.add_global_style(file_path="components.css")
+```
+
+#### Practical Example with External CSS
+
+**main.py:**
+```python
+from dars.all import *
+
+app = App(title="Dars Styling Test")
+
+index = Page(
+    Container(
+        Button("Styled Button", class_name="button-styling-test"),
+        id="page_sub_container"
+    )
+)
+
+app.add_page(name="index", root=index, title="index", index=True)
+app.add_global_style(file_path="styles.css")
+
+if __name__ == "__main__":
+    app.rTimeCompile(add_file_types=".py, .css")
+```
+
+**styles.css:**
+```css
+.button-styling-test {
+    background-color: rgb(51, 255, 0);
+    padding: 15px 30px;
+    border-radius: 8px;
+    border: none;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.button-styling-test:hover {
+    background-color: rgb(30, 200, 0);
+    transform: scale(1.05);
+}
+
+#page_sub_container {
+    padding: 20px;
+    background-color: #f5f5f5;
+    min-height: 100vh;
+}
+```
+
+### Hot Reload for CSS Files
+
+When using `app.rTimeCompile()` with the `add_file_types=".css"` parameter, the development server automatically watches for changes in CSS files and reloads the application when modifications are detected.
+
+```python
+# Watch for both Python and CSS file changes
+app.rTimeCompile(add_file_types=".py, .css")
+
+# Or watch for CSS files only
+app.rTimeCompile(add_file_types=".css")
+```
+
+### Benefits of External CSS Import
+
+1. **Separation of Concerns**: Keep styles separate from application logic
+2. **Better Organization**: Maintain complex stylesheets in dedicated files
+3. **Team Collaboration**: Designers and developers can work simultaneously
+4. **CSS Preprocessors**: Use SASS, LESS, or other preprocessors
+5. **Performance**: Browser caching for external CSS files
+
+### Backward Compatibility
+
+The enhanced method maintains full backward compatibility - existing code using `add_global_style(selector, styles)` will continue to work without modification.
+
+
 ## PWA Configuration Properties
 
 The App class includes these PWA-specific properties:

{dars_framework-1.1.2 → dars_framework-1.1.3}/dars/docs/components.md

@@ -19,13 +19,13 @@ This simplifies integration and improves the developer experience.
 
 Components are the fundamental elements of Dars that represent UI elements. Each component encapsulates its appearance, behavior, and state, allowing you to create complex interfaces by composing simple elements.
 
-To learn how to create your own custom components, refer to the documentation in [Custom Components](custom_components.md).
+To learn how to create your own custom components, refer to the documentation in [Custom Components](#custom-components-in-dars-framework).
 
 ## Event Handling with dScript
 
 Dars provides a powerful way to handle user interactions through the `dScript` class. You can attach event handlers to interactive components like `Button` and `Input` to create dynamic and responsive user interfaces.
 
-For a complete list of available event types and how to use them, refer to the documentation in [Events](events.md).
+For a complete list of available event types and how to use them, refer to the documentation in [Events](#events-in-dars).
 
 ### Basic Usage
 
@@ -87,34 +87,34 @@ input_field = Input(
 ### Quick Access
 
 - [Base Component Class](#base-component-class)
-- [Component Search](#Component-Search-and-Modification)
-- [Page](#Page)
-- [Text](#Text)
-- [Button](#Button)
-- [Input](#Input)
-- [Container](#Container)
-- [Markdown](#Markdown)
-- [Image](#Image)
-- [Link](#Link)
-- [Textarea](#Textarea)
-- [Checkbox](#Checkbox)
-- [RadioButton](#RadioButton)
-- [Select](#Select)
-- [Slider](#Slider)
-- [ProgressBar](#ProgressBar)
-- [Tooltip](#Tooltip)
-- [DatePicker](#DatePicker)
-- [Card](#Card)
-- [Modal](#Modal)
-- [Navbar](#Navbar)
-- [Accordion](#Accordion)
-- [Tabs](#Tabs)
-- [Table](#Table)
+- [Component Search](#component-search-and-modification)
+- [Page](#page)
+- [Text](#text)
+- [Button](#button)
+- [Input](#input)
+- [Container](#container)
+- [Markdown](#markdown)
+- [Image](#image)
+- [Link](#link)
+- [Textarea](#textarea)
+- [Checkbox](#checkbox)
+- [RadioButton](#radiobutton)
+- [Select](#select)
+- [Slider](#slider)
+- [ProgressBar](#progressBar)
+- [Tooltip](#tooltip)
+- [DatePicker](#datepicker)
+- [Card](#card)
+- [Modal](#modal)
+- [Navbar](#navbar)
+- [Accordion](#accordion)
+- [Tabs](#tabs)
+- [Table](#table)
 - [Layout Components](#layout-components)
-  - [GridLayout](#GridLayout)
-  - [FlexLayout](#FlexLayout)
-  - [LayoutBase](#LayoutBase)
-  - [AnchorPoint](#AnchorPoint)
+  - [GridLayout](#gridlayout)
+  - [FlexLayout](#flexlayout)
+  - [LayoutBase](#layoutbase)
+  - [AnchorPoint](#anchorpoint)
 
 ---
 
@@ -1675,4 +1675,3 @@ save_button = Button("Guardar", style=PRIMARY_BUTTON_STYLES)
 
 Components provide a solid foundation for creating modern and responsive user interfaces that can be exported to multiple platforms while maintaining consistency and functionality.
 
-

{dars_framework-1.1.2 → dars_framework-1.1.3}/dars/exporters/web/html_css_js.py

@@ -80,9 +80,11 @@ class HTMLCSSJSExporter(Exporter):
                     shutil.copy2(os.path.join(project_root, src), os.path.join(output_path, os.path.basename(src)))
             # NOTA: No copiar ejecutables ni nada fuera del proyecto
 
-            # Generar CSS global (compartido)
-            css_content = self.generate_css(app)
-            self.write_file(os.path.join(output_path, "styles.css"), css_content)
+            base_css_content = self.generate_base_css()  # Nuevo método para estilos base
+            custom_css_content = self.generate_custom_css(app)  # Nuevo método para estilos personalizados
+
+            self.write_file(os.path.join(output_path, "runtime_css.css"), base_css_content)
+            self.write_file(os.path.join(output_path, "styles.css"), custom_css_content)
 
             # Multipágina: exportar un HTML, CSS y JS por cada página registrada
             if hasattr(app, "is_multipage") and app.is_multipage():
@@ -493,7 +495,7 @@ self.addEventListener('fetch', event => {
     {links_html}
     {og_tags_html}
     {twitter_tags_html}
-    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">\n    <link rel=\"stylesheet\" href=\"{css_file}\">
+    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">\n    <link rel=\"stylesheet\" href=\"runtime_css.css\">\n    <link rel=\"stylesheet\" href=\"{css_file}\">
 </head>
 <body>
     {body_content}
@@ -548,6 +550,25 @@ if ('serviceWorker' in navigator) {
 </script>
 """)
         return "\n    ".join(links)
+    def generate_custom_css(self, app: App) -> str:
+        """Genera solo los estilos personalizados de la aplicación"""
+        css_content = ""
+        
+        # Agregar estilos globales de la aplicación definidos por el usuario
+        for selector, styles in app.global_styles.items():
+            css_content += f"{selector} {{\n"
+            css_content += f"    {self.render_styles(styles)}\n"
+            css_content += "}\n\n"
+
+        # Agregar contenido de archivos CSS globales
+        for file_path in app.global_style_files:
+            try:
+                with open(file_path, "r", encoding="utf-8") as f:
+                    css_content += f.read() + "\n\n"
+            except Exception as e:
+                print(f"[Dars] Warning: could not read CSS file '{file_path}': {e}")
+                
+        return css_content
 
     def _generate_open_graph_tags(self, app: App) -> str:
         """Genera todos los tags Open Graph para redes sociales"""
@@ -571,9 +592,9 @@ if ('serviceWorker' in navigator) {
         
         return '\n'.join(twitter_html)
         
-    def generate_css(self, app: App) -> str:
-        """Genera el contenido CSS"""
-        css_content = """/* Estilos base de Dars */
+    def generate_base_css(self) -> str:
+        """Genera el contenido CSS base"""
+        return """/* Estilos base de Dars */
 * {
     box-sizing: border-box;
 }
@@ -1250,24 +1271,7 @@ body {
     background-color: #444;
 }
 """
-        
-        # Agregar estilos globales de la aplicación definidos por el usuario
-        for selector, styles in app.global_styles.items():
-            css_content += f"{selector} {{\n"
-            css_content += f"    {self.render_styles(styles)}\n"
-            css_content += "}\n\n"
 
-        # Agregar contenido de archivos CSS globales
-        for file_path in app.global_style_files:
-            try:
-                with open(file_path, "r", encoding="utf-8") as f:
-                    css_content += f.read() + "\n\n"
-            except Exception as e:
-                print(f"[Dars] Warning: could not read CSS file '{file_path}': {e}")
-
-            
-        return css_content
-        
     def generate_javascript(self, app: App, page_root: Component) -> str:
         """Genera el contenido JavaScript específico para una página"""
         js_content = """// Dars Runtime - Página específica

{dars_framework-1.1.2 → dars_framework-1.1.3}/dars/templates/examples/advanced/SimpleDashboard/dashboard.py

@@ -432,9 +432,6 @@ main_container.add_child(content_area)
 app.set_root(main_container)
 app.add_script(script)
 
-# Para exportar esta aplicación, ejecuta:
-# ./dars_exporter export examples/advanced/dashboard.py --format html --output ./dashboard_output
-
 if __name__ == "__main__":
-    app.rTimeCompile()  # Preview/compilación rápida
+    app.rTimeCompile(watchfiledialog=True)  # Preview/compilación rápida
 

{dars_framework-1.1.2 → dars_framework-1.1.3}/dars/templates/examples/basic/HelloWorld/hello_world.py

@@ -97,5 +97,5 @@ app.set_root(container)
 app.add_script(script)
 
 if __name__ == '__main__':
-    app.rTimeCompile()
+    app.rTimeCompile(watchfiledialog=True)
 

{dars_framework-1.1.2 → dars_framework-1.1.3}/dars/version.py

@@ -1,2 +1,2 @@
-__version__ = "1.1.2"
-__release_url__ = "https://github.com/ZtaMDev/Dars-Framework/releases/tag/1.1.2"
+__version__ = "1.1.3"
+__release_url__ = "https://github.com/ZtaMDev/Dars-Framework/releases/tag/1.1.3"

{dars_framework-1.1.2 → dars_framework-1.1.3/dars_framework.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: dars-framework
-Version: 1.1.2
+Version: 1.1.3
 Summary: Dars is a Python UI framework for building modern, interactive web apps with only Python code. Write your interface in Python, export it to static HTML/CSS/JS, and deploy anywhere.
 Author-email: ztamdev <zondax2009@gmail.com>
 License: MIT License

{dars_framework-1.1.2 → dars_framework-1.1.3}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "dars-framework"
-version = "1.1.2"
+version = "1.1.3"
 description = "Dars is a Python UI framework for building modern, interactive web apps with only Python code. Write your interface in Python, export it to static HTML/CSS/JS, and deploy anywhere."
 authors = [
     { name="ztamdev", email="zondax2009@gmail.com" }