npm - domma-js - Versions diffs - 0.18.0 → 0.18.2 - Mend

domma-js 0.18.0 → 0.18.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/bin/domma-cli.js +9 -9
package/package.json +8 -4
package/public/dist/bundles/domma-complete.css +111 -38
package/public/dist/bundles/domma-data-focused.css +111 -38
package/public/dist/bundles/domma-essentials.css +111 -38
package/public/dist/bundles/domma-full.css +111 -38
package/public/dist/bundles/domma-grayve.css +111 -38
package/public/dist/bundles/domma-minimal.css +91 -26
package/public/dist/domma-syntax.min.js +3 -3
package/public/dist/domma.css +86 -21
package/public/dist/domma.esm.js +4 -4
package/public/dist/domma.min.js +4 -4
package/public/dist/elements.css +17 -9
package/public/dist/grid.css +3 -3
package/public/dist/syntax.css +3 -3
package/public/dist/themes/domma-themes.css +3 -3
package/templates/kickstart-old/about/index.html +0 -227
package/templates/kickstart-old/assets/logo/placeholder.svg +0 -6
package/templates/kickstart-old/blog/index.html +0 -216
package/templates/kickstart-old/contact/index.html +0 -223
package/templates/kickstart-old/css/custom.css +0 -121
package/templates/kickstart-old/docs/index.html +0 -308
package/templates/kickstart-old/domma.config.json +0 -74
package/templates/kickstart-old/index.html +0 -158
package/templates/kickstart-old/js/app.js +0 -158

package/templates/kickstart-old/contact/index.html DELETED Viewed

@@ -1,223 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Contact - {{projectName}}</title>
-  <!-- Domma CSS -->
-  <link rel="stylesheet" href="../node_modules/domma-js/public/dist/domma.css">
-  <link rel="stylesheet" href="../node_modules/domma-js/public/dist/grid.css">
-  <link rel="stylesheet" href="../node_modules/domma-js/public/dist/elements.css">
-  <link rel="stylesheet" href="../node_modules/domma-js/public/dist/themes/domma-themes.css">
-  <!-- Custom CSS -->
-  <link rel="stylesheet" href="../css/custom.css">
-</head>
-<body class="dm-theme-{{theme}}">
-<!-- Navigation -->
-<nav id="main-navbar"></nav>
-<!-- Page Header -->
-<section class="container py-6">
-  <h1 class="display-2 mb-3">Get in Touch</h1>
-  <p class="lead text-secondary">
-    Have a question? We'd love to hear from you. Send us a message and we'll respond as soon as possible.
-  </p>
-</section>
-<!-- Contact Content -->
-<section class="container py-4">
-  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-    <!-- Contact Form -->
-    <div class="lg:col-span-2">
-      <div class="card shadow-md">
-        <div class="card-body">
-          <h2 class="h4 mb-4">Send us a Message</h2>
-          <form id="contact-form">
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label for="name" class="form-label">Name *</label>
-                <input type="text" id="name" class="form-control" required>
-              </div>
-              <div>
-                <label for="email" class="form-label">Email *</label>
-                <input type="email" id="email" class="form-control" required>
-              </div>
-              <div class="md:col-span-2">
-                <label for="subject" class="form-label">Subject *</label>
-                <input type="text" id="subject" class="form-control" required>
-              </div>
-              <div class="md:col-span-2">
-                <label for="message" class="form-label">Message *</label>
-                <textarea id="message" class="form-control" rows="6" required></textarea>
-              </div>
-              <div class="md:col-span-2">
-                <button type="submit" class="btn btn-primary btn-lg">
-                  <span data-icon="send"></span> Send Message
-                </button>
-              </div>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-    <!-- Contact Information -->
-    <div class="col-12 col-lg-4">
-      <!-- Address Card -->
-      <div class="card mb-4">
-        <div class="card-body">
-          <h3 class="h5 mb-4">
-            <span data-icon="map-pin" class="me-2"></span> Location
-          </h3>
-          <p class="mb-2">123 Example Street</p>
-          <p class="mb-2">Suite 100</p>
-          <p class="mb-0">City, State 12345</p>
-        </div>
-      </div>
-      <!-- Contact Details -->
-      <div class="card mb-4">
-        <div class="card-body">
-          <h3 class="h5 mb-4">
-            <span data-icon="mail" class="me-2"></span> Contact Details
-          </h3>
-          <p class="mb-2">
-            <strong>Email:</strong><br>
-            <a href="mailto:hello@example.com">hello@example.com</a>
-          </p>
-          <p class="mb-0">
-            <strong>Phone:</strong><br>
-            <a href="tel:+1234567890">+1 (234) 567-890</a>
-          </p>
-        </div>
-      </div>
-      <!-- Social Links -->
-      <div class="card">
-        <div class="card-body">
-          <h3 class="h5 mb-4">
-            <span data-icon="share-2" class="me-2"></span> Follow Us
-          </h3>
-          <div class="d-flex flex-wrap gap-2">
-            <a href="#" class="btn btn-outline-primary">
-              <span data-icon="github"></span> GitHub
-            </a>
-            <a href="#" class="btn btn-outline-primary">
-              <span data-icon="twitter"></span> Twitter
-            </a>
-            <a href="#" class="btn btn-outline-primary">
-              <span data-icon="linkedin"></span> LinkedIn
-            </a>
-            <a href="#" class="btn btn-outline-primary">
-              <span data-icon="youtube"></span> YouTube
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- FAQ Section -->
-<section class="bg-surface py-6">
-  <div class="container">
-    <h2 class="text-center mb-6">Frequently Asked Questions</h2>
-    <div class="d-flex justify-content-center">
-      <div style="max-width: 800px; width: 100%;">
-        <div class="accordion" id="faq-accordion">
-          <!-- FAQ 1 -->
-          <div class="accordion-item">
-            <h3 class="accordion-header">
-              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
-                What is the response time?
-              </button>
-            </h3>
-            <div id="faq1" class="accordion-collapse collapse show">
-              <div class="accordion-body">
-                We typically respond to all enquiries within 24-48 hours during business days.
-              </div>
-            </div>
-          </div>
-          <!-- FAQ 2 -->
-          <div class="accordion-item">
-            <h3 class="accordion-header">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
-                Do you offer support?
-              </button>
-            </h3>
-            <div id="faq2" class="accordion-collapse collapse">
-              <div class="accordion-body">
-                Yes! We offer community support through GitHub Issues and email support for enterprise clients.
-              </div>
-            </div>
-          </div>
-          <!-- FAQ 3 -->
-          <div class="accordion-item">
-            <h3 class="accordion-header">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
-                Can I contribute to the project?
-              </button>
-            </h3>
-            <div id="faq3" class="accordion-collapse collapse">
-              <div class="accordion-body">
-                Absolutely! We welcome contributions. Check out our GitHub repository for contribution guidelines.
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- Footer -->
-<footer class="page-footer"></footer>
-<!-- Domma JavaScript -->
-<script src="../node_modules/domma-js/public/dist/domma.min.js"></script>
-<!-- App Initialization -->
-<script src="../js/app.js"></script>
-<!-- Form Handling -->
-<script>
-  $(() => {
-    // Handle contact form submission
-    $('#contact-form').on('submit', function (e) {
-      e.preventDefault();
-      // Get form values using Domma
-      const formData = {
-        name: $('#name').val(),
-        email: $('#email').val(),
-        subject: $('#subject').val(),
-        message: $('#message').val()
-      };
-      // Show success message (in a real app, send to backend)
-      Domma.elements.toast({
-        message: 'Thank you! Your message has been sent successfully.',
-        type: 'success',
-        duration: 5000
-      });
-      // Reset form
-      $(this)[0].reset();
-    });
-    // Initialize accordion
-    Domma.elements.accordion('#faq-accordion');
-  });
-</script>
-</body>
-</html>

package/templates/kickstart-old/css/custom.css DELETED Viewed

@@ -1,121 +0,0 @@
-/**
- * Custom Styles for {{projectName}}
- * ════════════════════════════════════════════════════════════════
- *
- * This file is loaded after all Domma CSS, allowing you to override
- * theme variables and component styles.
- */
-/* ────────────────────────────────────────────────────────────────
- * Theme Overrides
- * ────────────────────────────────────────────────────────────────
- * Override any theme variable to customize your brand colors.
- * Full list of variables: https://github.com/dcbw-it/domma
- *
- * Example: Customize primary color
- */
-:root {
-    /* Uncomment to override:
-    --dm-primary: #3b82f6;
-    --dm-primary-hover: #2563eb;
-    --dm-primary-text: #ffffff;
-    */
-}
-/* ────────────────────────────────────────────────────────────────
- * Component Overrides
- * ────────────────────────────────────────────────────────────────
- * Override component styles after Domma loads.
- */
-/* Example: Custom button styles */
-/*
-.btn-custom {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border: none;
-  color: white;
-}
-.btn-custom:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-}
-*/
-/* ────────────────────────────────────────────────────────────────
- * Layout Customizations
- * ────────────────────────────────────────────────────────────────
- */
-/* Footer styling */
-.page-footer {
-    background-color: var(--dm-surface);
-    border-top: 1px solid var(--dm-border);
-    padding: var(--dm-space-6) 0;
-    margin-top: var(--dm-space-8);
-}
-.footer-content {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 var(--dm-space-4);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--dm-space-4);
-}
-.footer-content p {
-    margin: 0;
-    color: var(--dm-text-secondary);
-}
-.footer-nav {
-    display: flex;
-    gap: var(--dm-space-6);
-}
-.footer-nav a {
-    color: var(--dm-text-secondary);
-    text-decoration: none;
-    transition: color 0.2s ease;
-}
-.footer-nav a:hover {
-    color: var(--dm-primary);
-}
-/* Code copy button styling */
-.code-copy-btn {
-    position: absolute;
-    top: var(--dm-space-2);
-    right: var(--dm-space-2);
-    opacity: 0.7;
-}
-.code-copy-btn:hover {
-    opacity: 1;
-}
-/* ────────────────────────────────────────────────────────────────
- * Responsive Adjustments
- * ────────────────────────────────────────────────────────────────
- */
-@media (max-width: 768px) {
-    .footer-content {
-        flex-direction: column;
-        text-align: center;
-    }
-    .footer-nav {
-        flex-direction: column;
-        gap: var(--dm-space-2);
-    }
-}
-/* ────────────────────────────────────────────────────────────────
- * Your Custom Styles
- * ────────────────────────────────────────────────────────────────
- * Add your project-specific styles below this line.
- */

package/templates/kickstart-old/docs/index.html DELETED Viewed

@@ -1,308 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Documentation - {{projectName}}</title>
-  <!-- Domma CSS -->
-  <link rel="stylesheet" href="../node_modules/domma-js/public/dist/domma.css">
-  <link rel="stylesheet" href="../node_modules/domma-js/public/dist/grid.css">
-  <link rel="stylesheet" href="../node_modules/domma-js/public/dist/elements.css">
-  <link rel="stylesheet" href="../node_modules/domma-js/public/dist/themes/domma-themes.css">
-  <link rel="stylesheet" href="../node_modules/domma-js/public/dist/syntax.css">
-  <!-- Custom CSS -->
-  <link rel="stylesheet" href="../css/custom.css">
-  <style>
-      .docs-sidebar {
-          position: sticky;
-          top: 80px;
-          max-height: calc(100vh - 100px);
-          overflow-y: auto;
-      }
-      .docs-sidebar .nav-link {
-          padding: var(--dm-space-2) var(--dm-space-3);
-          color: var(--dm-text-secondary);
-          border-left: 2px solid transparent;
-          transition: all 0.2s;
-      }
-      .docs-sidebar .nav-link:hover {
-          color: var(--dm-primary);
-          background: var(--dm-surface-raised);
-      }
-      .docs-sidebar .nav-link.active {
-          color: var(--dm-primary);
-          border-left-color: var(--dm-primary);
-          background: var(--dm-surface-raised);
-      }
-  </style>
-</head>
-<body class="dm-theme-{{theme}}">
-<!-- Navigation -->
-<nav id="main-navbar"></nav>
-<!-- Documentation Layout -->
-<div class="container-fluid py-6">
-  <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
-    <!-- Sidebar Navigation -->
-    <aside>
-      <div class="docs-sidebar">
-        <h2 class="h5 mb-3">Documentation</h2>
-        <nav class="nav flex-column">
-          <a href="#getting-started" class="nav-link active">Getting Started</a>
-          <a href="#installation" class="nav-link">Installation</a>
-          <a href="#configuration" class="nav-link">Configuration</a>
-          <a href="#components" class="nav-link">Components</a>
-          <a href="#theming" class="nav-link">Theming</a>
-          <a href="#api" class="nav-link">API Reference</a>
-          <a href="#faq" class="nav-link">FAQ</a>
-        </nav>
-      </div>
-    </aside>
-    <!-- Main Content -->
-    <main class="lg:col-span-3">
-      <!-- Getting Started -->
-      <section id="getting-started" class="mb-8">
-        <h1 class="display-4 mb-4">Getting Started</h1>
-        <p class="lead">
-          Welcome to {{projectName}}! This guide will help you get up and running quickly.
-        </p>
-      </section>
-      <!-- Installation -->
-      <section id="installation" class="mb-8">
-        <h2 class="h3 mb-4">Installation</h2>
-        <div id="install-tabs" class="tabs mb-4">
-          <ul class="tabs-nav">
-            <li><a href="#npm-tab" class="active">npm</a></li>
-            <li><a href="#yarn-tab">Yarn</a></li>
-            <li><a href="#cdn-tab">CDN</a></li>
-          </ul>
-          <div class="tabs-content">
-            <!-- npm Tab -->
-            <div id="npm-tab" class="tabs-pane active">
-              <p>Install via npm:</p>
-              <pre><code class="language-bash">npm install domma-js</code></pre>
-            </div>
-            <!-- Yarn Tab -->
-            <div id="yarn-tab" class="tabs-pane">
-              <p>Install via Yarn:</p>
-              <pre><code class="language-bash">yarn add domma-js</code></pre>
-            </div>
-            <!-- CDN Tab -->
-            <div id="cdn-tab" class="tabs-pane">
-              <p>Include from CDN:</p>
-              <pre><code class="language-html">&lt;link rel="stylesheet" href="https://unpkg.com/domma-js/dist/domma.css"&gt;
-&lt;script src="https://unpkg.com/domma-js/dist/domma.min.js"&gt;&lt;/script&gt;</code></pre>
-            </div>
-          </div>
-        </div>
-      </section>
-      <!-- Configuration -->
-      <section id="configuration" class="mb-8">
-        <h2 class="h3 mb-4">Configuration</h2>
-        <p>
-          Configure your project using the <code>domma.config.json</code> file:
-        </p>
-        <pre><code class="language-json">{
-  "theme": {
-    "default": "charcoal-dark",
-    "persist": true
-  },
-  "navbar": {
-    "brand": { "text": "My App" },
-    "items": [
-      { "text": "Home", "url": "/" }
-    ]
-  }
-}</code></pre>
-        <div class="alert alert-info mt-4">
-          <span data-icon="info" class="me-2"></span>
-          <strong>Tip:</strong> You can override any configuration value programmatically using JavaScript.
-        </div>
-      </section>
-      <!-- Components -->
-      <section id="components" class="mb-8">
-        <h2 class="h3 mb-4">Components</h2>
-        <p>
-          Domma includes 19+ UI components out of the box. Here are some examples:
-        </p>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3">
-          <div class="card shadow-md">
-            <div class="card-body">
-              <h3 class="h5 mb-2">Buttons</h3>
-              <div class="d-flex flex-wrap gap-2">
-                <button class="btn btn-primary">Primary</button>
-                <button class="btn btn-secondary">Secondary</button>
-                <button class="btn btn-success">Success</button>
-                <button class="btn btn-danger">Danger</button>
-              </div>
-            </div>
-          </div>
-          <div class="card shadow-md">
-            <div class="card-body">
-              <h3 class="h5 mb-2">Badges</h3>
-              <div class="d-flex flex-wrap gap-2">
-                <span class="badge badge-primary">Primary</span>
-                <span class="badge badge-success">Success</span>
-                <span class="badge badge-warning">Warning</span>
-                <span class="badge badge-danger">Danger</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      <!-- Theming -->
-      <section id="theming" class="mb-8">
-        <h2 class="h3 mb-4">Theming</h2>
-        <p>
-          Customize your theme by overriding CSS variables:
-        </p>
-        <pre><code class="language-css">:root {
-  --dm-primary: #3b82f6;
-  --dm-primary-hover: #2563eb;
-}</code></pre>
-        <p class="mt-3">
-          Or use one of the 16+ built-in themes:
-        </p>
-        <pre><code class="language-javascript">Domma.theme.set('ocean-dark');</code></pre>
-      </section>
-      <!-- API Reference -->
-      <section id="api" class="mb-8">
-        <h2 class="h3 mb-4">API Reference</h2>
-        <div class="card mb-4">
-          <div class="card-body">
-            <h3 class="h5 mb-3">Domma ($ alias)</h3>
-            <p class="text-secondary mb-3">jQuery-compatible DOM manipulation</p>
-            <pre><code class="language-javascript">$('#element').addClass('active');
-$('.items').each((el) => console.log(el));</code></pre>
-          </div>
-        </div>
-        <div class="card mb-4">
-          <div class="card-body">
-            <h3 class="h5 mb-3">Domma.utils (_ alias)</h3>
-            <p class="text-secondary mb-3">Lodash-compatible utilities</p>
-            <pre><code class="language-javascript">_.chunk([1, 2, 3, 4], 2);  // [[1, 2], [3, 4]]
-_.debounce(fn, 300);</code></pre>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-body">
-            <h3 class="h5 mb-3">Domma.theme</h3>
-            <p class="text-secondary mb-3">Theme management</p>
-            <pre><code class="language-javascript">Domma.theme.init({ theme: 'ocean-dark' });
-Domma.theme.get();  // 'ocean-dark'</code></pre>
-          </div>
-        </div>
-      </section>
-      <!-- FAQ -->
-      <section id="faq" class="mb-8">
-        <h2 class="h3 mb-4">Frequently Asked Questions</h2>
-        <div class="accordion" id="docs-faq">
-          <div class="accordion-item">
-            <h3 class="accordion-header">
-              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
-                Is Domma production-ready?
-              </button>
-            </h3>
-            <div id="faq1" class="accordion-collapse collapse show">
-              <div class="accordion-body">
-                Yes! Domma is actively maintained and used in production applications.
-              </div>
-            </div>
-          </div>
-          <div class="accordion-item">
-            <h3 class="accordion-header">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
-                What browsers are supported?
-              </button>
-            </h3>
-            <div id="faq2" class="accordion-collapse collapse">
-              <div class="accordion-body">
-                Domma supports all modern browsers (Chrome, Firefox, Safari, Edge). IE11 is not supported.
-              </div>
-            </div>
-          </div>
-          <div class="accordion-item">
-            <h3 class="accordion-header">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
-                Can I use Domma with React/Vue/Angular?
-              </button>
-            </h3>
-            <div id="faq3" class="accordion-collapse collapse">
-              <div class="accordion-body">
-                Yes! While Domma works standalone, you can integrate it with any framework for utilities and theming.
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    </main>
-  </div>
-</div>
-<!-- Footer -->
-<footer class="page-footer"></footer>
-<!-- Domma JavaScript -->
-<script src="../node_modules/domma-js/public/dist/domma.min.js"></script>
-<script src="../node_modules/domma-js/public/dist/domma-syntax.min.js"></script>
-<!-- App Initialization -->
-<script src="../js/app.js"></script>
-<!-- Page-specific scripts -->
-<script>
-  $(() => {
-    // Initialize tabs
-    Domma.elements.tabs('#install-tabs');
-    // Initialize accordion
-    Domma.elements.accordion('#docs-faq');
-    // Smooth scroll for sidebar links
-    $('.docs-sidebar a').on('click', function (e) {
-      e.preventDefault();
-      const targetId = $(this).attr('href');
-      const $target = $(targetId);
-      if ($target.length) {
-        $target[0].scrollIntoView({behavior: 'smooth'});
-        // Update active state
-        $('.docs-sidebar .nav-link').removeClass('active');
-        $(this).addClass('active');
-      }
-    });
-  });
-</script>
-</body>
-</html>