drf-to-mkdoc 0.2.3__py3-none-any.whl → 0.2.4__py3-none-any.whl

drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/try-out/tabs.css

@@ -1,50 +1,102 @@
-/* Tabs */
-.tabs {
+/* Smart Tabs */
+.smart-tabs {
     display: flex;
-    gap: 0;
+    gap: var(--try-out-spacing-xs);
+    border-bottom: 1px solid var(--try-out-border);
+    padding-bottom: var(--try-out-spacing-xs);
     margin-bottom: var(--try-out-spacing-lg);
-    border: 1px solid var(--try-out-border);
-    border-radius: var(--try-out-border-radius);
-    overflow: hidden;
-    background-color: var(--try-out-surface);
 }
 
 .tab {
-    flex: 1;
-    padding: var(--try-out-spacing) var(--try-out-spacing-lg);
-    border: none;
+    display: flex;
+    align-items: center;
+    gap: var(--try-out-spacing-xs);
+    padding: var(--try-out-spacing-sm) var(--try-out-spacing);
+    border-radius: var(--try-out-border-radius);
     background: transparent;
+    border: none;
     color: var(--try-out-text-light);
     cursor: pointer;
+    transition: var(--try-out-transition);
     font-size: var(--try-out-font-base);
     font-weight: 500;
     position: relative;
-    transition: var(--try-out-transition);
-    border-right: 1px solid var(--try-out-border);
 }
 
-.tab:last-child {
-    border-right: none;
-}
-
-.tab:hover {
-    background-color: rgba(25, 118, 210, 0.05);
+.tab:hover:not(.active) {
+    background: var(--try-out-surface);
     color: var(--try-out-text);
 }
 
 .tab.active {
-    background-color: var(--try-out-primary);
+    background: var(--try-out-primary);
     color: white;
+    box-shadow: var(--try-out-shadow-md);
+}
+
+.tab .icon {
+    font-size: 0.9rem;
+    line-height: 1;
+}
+
+.badge {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 2px 6px;
+    border-radius: 10px;
+    font-size: 0.7em;
+    font-weight: 600;
+    line-height: 1;
+}
+
+.tab.active .badge {
+    background: rgba(255, 255, 255, 0.25);
+}
+
+.tab:not(.active) .badge {
+    background: var(--try-out-primary-light);
+    color: var(--try-out-primary);
 }
 
 .tab-content {
     display: none;
+    animation: fadeIn 0.2s ease-out;
 }
 
 .tab-content.active {
     display: block;
 }
 
+/* Response Tabs */
+.response-tabs {
+    display: flex;
+    gap: var(--try-out-spacing-xs);
+    border-bottom: 1px solid var(--try-out-border);
+    padding-bottom: var(--try-out-spacing-xs);
+    margin-bottom: var(--try-out-spacing);
+}
+
+.response-tabs .tab {
+    padding: var(--try-out-spacing-xs) var(--try-out-spacing-sm);
+    font-size: var(--try-out-font-sm);
+}
+
+/* Tab Focus States */
+.tab:focus-visible {
+    outline: 2px solid var(--try-out-primary);
+    outline-offset: 2px;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
 /* Mobile Tabs */
 @media screen and (max-width: 768px) {
     .tabs {

drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/try-out/variables.css

@@ -1,6 +1,9 @@
 :root {
+    /* Color Palette */
     --try-out-primary: #1976d2;
     --try-out-primary-hover: #1565c0;
+    --try-out-primary-rgb: 25, 118, 210;
+    --try-out-primary-light: rgba(25, 118, 210, 0.1);
     --try-out-success: #28a745;
     --try-out-success-hover: #218838;
     --try-out-danger: #dc3545;
@@ -8,31 +11,84 @@
     --try-out-warning: #ffc107;
     --try-out-info: #17a2b8;
     
+    /* Light Theme Colors */
     --try-out-bg: #ffffff;
     --try-out-surface: #f8f9fa;
+    --try-out-surface-raised: #ffffff;
     --try-out-border: #e1e5e9;
     --try-out-text: #333333;
     --try-out-text-light: #666666;
     --try-out-text-lighter: #999999;
     --try-out-shadow: rgba(0, 0, 0, 0.1);
     --try-out-shadow-strong: rgba(0, 0, 0, 0.2);
+    --try-out-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
+    --try-out-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
+    --try-out-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
     
-    --try-out-border-radius: 4px;
-    --try-out-border-radius-lg: 6px;
-    --try-out-spacing-xs: 0.2rem;
-    --try-out-spacing-sm: 0.4rem;
-    --try-out-spacing: 0.6rem;
-    --try-out-spacing-lg: 0.8rem;
-    --try-out-spacing-xl: 1.2rem;
-    --try-out-spacing-xxl: 1.6rem;
-    
-    --try-out-font-sm: 0.75rem;
-    --try-out-font-base: 0.8rem;
-    --try-out-font-lg: 0.9rem;
-    --try-out-line-height: 1.4;
-    
-    --try-out-transition: all 0.2s ease;
+    /* Glass Effect */
+    --try-out-glass-bg: rgba(255, 255, 255, 0.95);
+    --try-out-glass-border: rgba(255, 255, 255, 0.2);
+    --try-out-backdrop-blur: 10px;
+    
+    /* Gradients */
+    --try-out-gradient-primary: linear-gradient(135deg, var(--try-out-primary), var(--try-out-primary-hover));
+    
+    /* Layout */
+    --try-out-border-radius: 6px;
+    --try-out-border-radius-lg: 10px;
+    --try-out-spacing-2xs: 0.125rem;
+    --try-out-spacing-xs: 0.25rem;
+    --try-out-spacing-sm: 0.5rem;
+    --try-out-spacing: 0.75rem;
+    --try-out-spacing-lg: 1rem;
+    --try-out-spacing-xl: 1.5rem;
+    --try-out-spacing-xxl: 2rem;
+    
+    /* Typography */
+    --try-out-font-sm: 0.875rem;
+    --try-out-font-base: 0.9rem;
+    --try-out-font-lg: 1rem;
+    --try-out-line-height: 1.5;
+    
+    /* Animation */
+    --try-out-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+    
+    /* Z-Index */
     --try-out-z-modal: 1000;
     --try-out-z-response: 1100;
     --try-out-z-fab: 100;
+    --try-out-z-sticky: 50;
+}
+
+/* Dark Theme Colors */
+[data-md-color-scheme="slate"] {
+    --try-out-bg: #1a1a1a;
+    --try-out-surface: #2d2d2d;
+    --try-out-surface-raised: #3a3a3a;
+    --try-out-border: #404040;
+    --try-out-text: #e0e0e0;
+    --try-out-text-light: #b0b0b0;
+    --try-out-text-lighter: #808080;
+    --try-out-shadow: rgba(0, 0, 0, 0.3);
+    --try-out-shadow-strong: rgba(0, 0, 0, 0.5);
+    --try-out-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+    --try-out-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.4);
+    --try-out-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
+    
+    /* Glass Effect for Dark Mode */
+    --try-out-glass-bg: rgba(45, 45, 45, 0.95);
+    --try-out-glass-border: rgba(255, 255, 255, 0.1);
+    
+    /* Adjust primary colors for better contrast */
+    --try-out-primary: #42a5f5;
+    --try-out-primary-hover: #2196f3;
+    --try-out-primary-rgb: 66, 165, 245;
+    --try-out-primary-light: rgba(66, 165, 245, 0.15);
+    
+    /* Status colors for dark mode */
+    --try-out-success: #4caf50;
+    --try-out-danger: #f44336;
+    --try-out-warning: #ff9800;
+    --try-out-info: #00bcd4;
 }

drf_to_mkdoc/templates/endpoints/detail/request_body.html

@@ -4,7 +4,9 @@
 ## Request Body
 
 {% if request_example %}
+<div class="request-example" data-example='{{ request_example|format_json }}'>
 {{ request_example|format_json }}
+</div>
 {% endif %}
 
 {% endif %}

drf_to_mkdoc/templates/try-out/fab.html

@@ -1,4 +1,68 @@
 <!-- Try Out Floating Action Button -->
-<button class="try-out-fab" role="button" tabindex="0" aria-label="Open Try It Out" onclick="TryOutSidebar.openTryOut()">
-    <span>🚀</span>
-</button>
+<div class="try-out-fab-container">
+    <button 
+        class="try-out-fab" 
+        role="button" 
+        tabindex="0" 
+        aria-label="Open Try It Out"
+        aria-expanded="false"
+        onclick="TryOutSidebar.openTryOut()"
+        data-tooltip="Try out this endpoint"
+    >
+        <div class="fab-content">
+            <span class="fab-icon">🚀</span>
+        </div>
+        <div class="ripple-container"></div>
+        <div class="pulse-ring"></div>
+    </button>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Ripple effect
+    const fab = document.querySelector('.try-out-fab');
+    
+    fab.addEventListener('click', function(e) {
+        const ripple = document.createElement('div');
+        ripple.className = 'ripple';
+        
+        const rect = this.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+        const x = e.clientX - rect.left - size / 2;
+        const y = e.clientY - rect.top - size / 2;
+        
+        ripple.style.width = ripple.style.height = `${size}px`;
+        ripple.style.left = `${x}px`;
+        ripple.style.top = `${y}px`;
+        
+        this.querySelector('.ripple-container').appendChild(ripple);
+        
+        setTimeout(() => ripple.remove(), 600);
+    });
+
+    // Keyboard shortcut
+    document.addEventListener('keydown', function(e) {
+        if (e.ctrlKey && e.code === 'Space') {
+            e.preventDefault();
+            TryOutSidebar.openTryOut();
+            
+            // Animate the FAB
+            fab.classList.add('keyboard-triggered');
+            setTimeout(() => fab.classList.remove('keyboard-triggered'), 200);
+        }
+    });
+
+    // Show/hide shortcut hint
+    let hintTimeout;
+    fab.addEventListener('mouseenter', function() {
+        clearTimeout(hintTimeout);
+        document.querySelector('.shortcut-hint').classList.add('visible');
+    });
+
+    fab.addEventListener('mouseleave', function() {
+        hintTimeout = setTimeout(() => {
+            document.querySelector('.shortcut-hint').classList.remove('visible');
+        }, 500);
+    });
+});
+</script>

drf_to_mkdoc/templates/try-out/form.html

@@ -1,113 +1,260 @@
 {% load custom_filters %}
 
 <div class="try-out-form" data-method="{{ method }}">
-    <!-- Base URL Section -->
-    <div class="base-url-section">
-        <label for="baseUrl">Request URL</label>
-        <div class="url-display">
-            <input type="text" id="baseUrl" class="base-url-input" value="http://localhost:8000" placeholder="https://api.example.com">
-            <span class="path-display">{{ path }}</span>
+    <!-- Method Badge and Base URL Section -->
+    <div class="request-header">
+        <div class="method-badge method-{{ method|lower }}" data-method="{{ method|upper }}">{{ method|upper }}</div>
+        <div class="base-url-section">
+            <div class="floating-label-group">
+                <input type="text" 
+                       id="baseUrl" 
+                       class="base-url-input floating-input" 
+                       value="http://localhost:8000" 
+                       placeholder=" "
+                       required>
+                <label for="baseUrl" class="floating-label">Request URL</label>
+                <div class="url-preview">
+                    <code class="path-display">{{ path }}</code>
+                    <button class="copy-btn" onclick="copyToClipboard(this)" aria-label="Copy URL">
+                        <span class="icon">📋</span>
+                    </button>
+                </div>
+            </div>
         </div>
     </div>
 
-    <!-- Tabs -->
-    <div class="tabs">
-        <button class="tab active" data-tab="parameters">Parameters</button>
-        <button class="tab" data-tab="headers">Headers</button>
+    <!-- Smart Tabs with Icons -->
+    <div class="smart-tabs" role="tablist">
+        <button class="tab active" 
+                id="tab-parameters"
+                role="tab" 
+                aria-selected="true"
+                aria-controls="parametersTab"
+                data-tab="parameters">
+            <span class="icon">📝</span>
+            Parameters
+            {% if path_params %}<span class="badge">{{ path_params|length }}</span>{% endif %}
+        </button>
+        <button class="tab" 
+                id="tab-headers"
+                role="tab"
+                aria-selected="false"
+                aria-controls="headersTab"
+                data-tab="headers">
+            <span class="icon">📋</span>
+            Headers
+        </button>
         {% if method|upper in "POST,PUT,PATCH" %}
-        <button class="tab" data-tab="body">Request Body</button>
+        <button class="tab" 
+                id="tab-body"
+                role="tab"
+                aria-selected="false"
+                aria-controls="bodyTab"
+                data-tab="body">
+            <span class="icon">📦</span>
+            Request Body
+        </button>
         {% endif %}
     </div>
 
     <!-- Parameters Tab -->
-    <div class="tab-content active" id="parametersTab">
+    <div class="tab-content active" 
+         id="parametersTab" 
+         role="tabpanel"
+         aria-labelledby="tab-parameters">
         {% if path_params %}
-        <div class="form-group">
-            <label class="form-label">Path Parameters</label>
-            <div class="kv-container" id="pathParams">
+        <div class="form-section">
+            <div class="section-header">
+                <h4>Path Parameters</h4>
+                <div class="tooltip" data-tooltip="Values that are part of the URL path">ℹ️</div>
+            </div>
+            <div class="parameter-grid" id="pathParams">
                 {% for param in path_params %}
-                <div class="kv-item">
-                    <label class="param-label{% if param.required %} required{% endif %}">{{ param.name }}</label>
-                    <input type="text" 
-                           placeholder="Enter {{ param.name }} value" 
-                           data-param="{{ param.name }}"
-                           {% if param.required %}required{% endif %}>
-                    <div class="error-message"></div>
+                <div class="parameter-card{% if param.required %} required{% endif %}">
+                    <div class="parameter-header">
+                        <label class="param-label">{{ param.name }}</label>
+                        {% if param.required %}
+                        <span class="required-badge">Required</span>
+                        {% endif %}
+                    </div>
+                    <div class="parameter-input-group">
+                        <input type="text" 
+                               class="modern-input"
+                               placeholder="Enter value"
+                               data-param="{{ param.name }}"
+                               {% if param.required %}required{% endif %}>
+                        {% if param.description %}
+                        <div class="param-description">{{ param.description }}</div>
+                        {% endif %}
+                        <div class="validation-message"></div>
+                    </div>
                 </div>
                 {% endfor %}
             </div>
         </div>
         {% endif %}
 
-        <div class="form-group">
-            <label class="form-label">Query Parameters</label>
-            <div class="kv-container" id="queryParams">
-                <div class="kv-item">
-                    <input type="text" placeholder="Parameter name">
-                    <input type="text" placeholder="Parameter value">
-                    <button class="remove-btn" onclick="TryOutSidebar.removeKvItem(this)">✕</button>
+        <div class="form-section">
+            <div class="section-header">
+                <h4>Query Parameters</h4>
+                <div class="tooltip" data-tooltip="Parameters added to the URL after ?">ℹ️</div>
+            </div>
+            <div class="parameter-container" id="queryParams">
+                <div class="parameter-toolbar">
+                    <button class="add-param-btn" onclick="TryOutSidebar.addQueryParam()">
+                        <span class="icon">+</span> Add Parameter
+                    </button>
+                </div>
+                <div class="parameter-list">
+                    <div class="parameter-item">
+                        <div class="parameter-inputs">
+                            <input type="text" 
+                                   class="modern-input name-input" 
+                                   placeholder="Parameter name"
+                                   list="paramSuggestions">
+                            <input type="text" 
+                                   class="modern-input value-input" 
+                                   placeholder="Value">
+                            <button class="remove-btn" 
+                                    onclick="TryOutSidebar.removeKvItem(this)"
+                                    aria-label="Remove parameter">
+                                <span class="icon">✕</span>
+                            </button>
+                        </div>
+                    </div>
                 </div>
+                <!-- Parameter Suggestions -->
+                <datalist id="paramSuggestions">
+                    {% for field in query_parameters.filter_fields %}
+                    <option value="{{ field }}"></option>
+                    {% endfor %}
+                    
+                    {% if query_parameters.search_fields %}
+
+                    <option value="search"></option>
+                    {% endif %}
+                    
+                    {% if query_parameters.ordering_fields %}
+
+                    <option value="ordering"></option>
+                    {% endif %}
+                    
+                    {% for field in query_parameters.pagination_fields %}
+                    <option value="{{ field }}"></option>
+                    {% endfor %}
+                </datalist>
             </div>
-            <button class="add-btn" onclick="TryOutSidebar.addQueryParam()">
-                <span>+</span> Add Parameter
-            </button>
         </div>
     </div>
 
     <!-- Headers Tab -->
-    <div class="tab-content" id="headersTab">
-        <div class="form-group">
-            <label class="form-label">Request Headers</label>
-            <div class="kv-container" id="requestHeaders">
-                <div class="kv-item">
-                    <input type="text" value="Content-Type">
-                    <input type="text" value="application/json">
-                    <button class="remove-btn" onclick="TryOutSidebar.removeKvItem(this)">✕</button>
+    <div class="tab-content" 
+         id="headersTab"
+         role="tabpanel"
+         aria-labelledby="tab-headers">
+        <div class="form-section">
+            <div class="section-header">
+                <h4>Request Headers</h4>
+                <div class="tooltip" data-tooltip="HTTP headers sent with the request">ℹ️</div>
+            </div>
+            <div class="header-container" id="requestHeaders">
+                <div class="header-toolbar">
+                    <button class="add-header-btn" onclick="TryOutSidebar.addHeader()">
+                        <span class="icon">+</span> Add Header
+                    </button>
                 </div>
-                <div class="kv-item">
-                    <input type="text" value="Authorization">
-                    <input type="text" placeholder="Bearer your-token">
-                    <button class="remove-btn" onclick="TryOutSidebar.removeKvItem(this)">✕</button>
+                <div class="header-list">
+                    <div class="header-item">
+                        <div class="header-inputs">
+                            <input type="text" 
+                                   class="modern-input name-input" 
+                                   value="Content-Type"
+                                   list="headerSuggestions">
+                            <input type="text" 
+                                   class="modern-input value-input" 
+                                   value="application/json">
+                            <button class="remove-btn" 
+                                    onclick="TryOutSidebar.removeKvItem(this)"
+                                    aria-label="Remove header">
+                                <span class="icon">✕</span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="header-item">
+                        <div class="header-inputs">
+                            <input type="text" 
+                                   class="modern-input name-input" 
+                                   value="Authorization"
+                                   list="headerSuggestions">
+                            <input type="text" 
+                                   class="modern-input value-input" 
+                                   placeholder="Bearer your-token">
+                            <button class="remove-btn" 
+                                    onclick="TryOutSidebar.removeKvItem(this)"
+                                    aria-label="Remove header">
+                                <span class="icon">✕</span>
+                            </button>
+                        </div>
+                    </div>
                 </div>
+                <!-- Header Suggestions -->
+                <datalist id="headerSuggestions">
+                    <option value="Accept">Response format preference</option>
+                    <option value="Authorization">Authentication credentials</option>
+                    <option value="Content-Type">Request body format</option>
+                    <option value="Cache-Control">Caching behavior</option>
+                </datalist>
             </div>
-            <button class="add-btn" onclick="TryOutSidebar.addHeader()">
-                <span>+</span> Add Header
-            </button>
         </div>
     </div>
 
     <!-- Request Body Tab -->
     {% if method|upper in "POST,PUT,PATCH" %}
-    <div class="tab-content" id="bodyTab">
-        <div class="form-group">
-            <label class="form-label">Request Body</label>
-            <textarea id="requestBody" 
-                      class="form-input form-textarea" 
-                      placeholder="Enter JSON request body..."
-                      rows="8">{% if request_example %}{{ request_example|extract_json_from_markdown }}{% endif %}</textarea>
+    <div class="tab-content" 
+         id="bodyTab"
+         role="tabpanel"
+         aria-labelledby="tab-body">
+        <div class="form-section">
+            <div class="section-header">
+                <h4>Request Body</h4>
+                <div class="body-toolbar">
+                    <button class="format-btn" onclick="formatJson()">
+                        <span class="icon">🔧</span> Format
+                    </button>
+                    <button class="validate-btn" onclick="validateJson()">
+                        <span class="icon">✓</span> Validate
+                    </button>
+                </div>
+            </div>
+            <div class="editor-container">
+                <div class="editor-wrapper">
+                    <textarea id="requestBody" 
+                              class="code-editor" 
+                              placeholder="Enter JSON request body..."
+                              spellcheck="false"
+                              rows="8">{% if request_example %}{{ request_example|extract_json_from_markdown }}{% endif %}</textarea>
+                    <div class="editor-overlay"></div>
+                </div>
+                <div class="validation-status"></div>
+            </div>
         </div>
     </div>
     {% endif %}
 
-    <!-- Execute Button -->
-    <button class="execute-btn" id="executeBtn" onclick="executeRequest()">
-        <span>▶</span> Execute Request
-    </button>
+    <!-- Action Bar - Hidden since buttons are in modal footer -->
+    <div class="action-bar" style="display: none;">
+        <div class="action-group">
+            <button class="secondary-btn" onclick="resetForm()">
+                <span class="icon">↺</span> Reset
+            </button>
+            <button class="primary-btn" id="executeBtn" onclick="executeRequest()">
+                <span class="icon">▶</span> Execute Request
+                <div class="loading-spinner"></div>
+            </button>
+        </div>
+    </div>
 </div>
 
-<script>
-// Pass query parameters data to JavaScript
-window.queryParametersData = {
-    {% if query_parameters %}
-    filter_fields: {{ query_parameters.filter_fields|default:"[]"|safe }},
-    search_fields: {{ query_parameters.search_fields|default:"[]"|safe }},
-    ordering_fields: {{ query_parameters.ordering_fields|default:"[]"|safe }},
-    pagination_fields: {{ query_parameters.pagination_fields|default:"[]"|safe }}
-    {% else %}
-    filter_fields: [],
-    search_fields: [],
-    ordering_fields: [],
-    pagination_fields: []
-    {% endif %}
-};
-</script>
+<!-- Form styles are now in form.css -->
+
+<!-- JavaScript functionality is now handled in the modular try-out/*.js files -->