millas 0.2.13 → 0.2.14

package/src/admin/views/pages/list.njk

@@ -65,7 +65,7 @@
 
     <div class="toolbar-right">
       {% if filters | length %}
-      <button class="btn btn-ghost btn-sm" onclick="toggleFilters()" id="filter-toggle">
+      <button class="btn btn-ghost btn-sm" id="filter-toggle">
         <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-filter"/></svg></span>
         Filters
         {% if activeFilters | length %}
@@ -100,18 +100,18 @@
     <span class="bulk-count" id="bulk-count">0 selected</span>
     <span class="text-muted" style="font-size:12px">—</span>
     {% for action in resource.actions %}
-    <button class="btn btn-ghost btn-sm" onclick="bulkAction({{ action.index }})">
+    <button class="btn btn-ghost btn-sm" data-bulk-action="{{ action.index }}">
       {% if action.icon %}<span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-{{ action.icon }}"/></svg></span>{% endif %}
       {{ action.label }}
     </button>
     {% endfor %}
     {% if resource.canDelete %}
-    <button class="btn btn-ghost btn-sm btn-danger" onclick="bulkDelete()">
+    <button class="btn btn-ghost btn-sm btn-danger" id="bulk-delete-btn">
       <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-trash"/></svg></span>
       Delete selected
     </button>
     {% endif %}
-    <button class="btn btn-ghost btn-sm" style="margin-left:auto" onclick="clearSelection()">
+    <button class="btn btn-ghost btn-sm" style="margin-left:auto" id="clear-selection">
       <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-x"/></svg></span>
       Cancel
     </button>
@@ -171,7 +171,7 @@
       <thead>
         <tr>
           <th class="col-check">
-            <input type="checkbox" class="row-check" id="check-all" onchange="toggleAll(this)" title="Select all">
+            <input type="checkbox" class="row-check" id="check-all" title="Select all">
           </th>
           {% for field in listFields %}
           {% set isSorted = sort == field.name %}
@@ -323,196 +323,14 @@
   </div>
 </div>
 
+{% block scripts %}
 <script>
-  $(function() {
-    var PREFIX = '{{ adminPrefix }}';
-    var SLUG   = '{{ resource.slug }}';
-
-    // ── Filter panel ─────────────────────────────────────────────────────────
-    {% if activeFilters | length %}$('#filter-panel').show();{% endif %}
-
-    window.toggleFilters = function() {
-      $('#filter-panel').toggle();
-    };
-
-    // ── Live search on Enter ──────────────────────────────────────────────────
-    $('#search-form input[name="search"]').on('keydown', function(e) {
-      if (e.key === 'Enter') $('#search-form').submit();
-    });
-
-    // ── Bulk selection ────────────────────────────────────────────────────────
-    function updateBulkBar() {
-      var $checked = $('.item-check:checked');
-      var n        = $checked.length;
-      var total    = $('.item-check').length;
-      $('#bulk-bar').toggleClass('visible', n > 0);
-      $('#bulk-count').text(n + ' selected');
-      $('#check-all').prop('indeterminate', n > 0 && n < total)
-                     .prop('checked',       n > 0 && n === total);
-    }
-
-    window.toggleAll = function(master) {
-      $('.item-check').prop('checked', master.checked);
-      updateBulkBar();
-    };
-
-    window.clearSelection = function() {
-      $('.item-check, #check-all').prop('checked', false).prop('indeterminate', false);
-      updateBulkBar();
-    };
-
-    $(document).on('change', '.item-check', updateBulkBar);
-
-    window.bulkDelete = function() {
-      var ids   = $('.item-check:checked').map(function() { return this.value; }).get();
-      if (!ids.length) return;
-      var label = ids.length + ' record' + (ids.length > 1 ? 's' : '');
-      confirmDeleteBulk(PREFIX + '/' + SLUG + '/bulk-delete', label, ids);
-    };
-
-    window.confirmDeleteBulk = function(url, label, ids) {
-      UI.Confirm.show({
-        title:   'Delete ' + label,
-        message: 'Delete <strong>' + label + '</strong>? This cannot be undone.',
-        confirm: 'Delete',
-        danger:  true,
-      }).then(function(ok) {
-        if (!ok) return;
-        var csrf = $('meta[name="csrf-token"]').attr('content') || '';
-        var $form = $('<form method="POST">').attr('action', url);
-        $form.append('<input name="_csrf" value="' + csrf + '">');
-        $.each(ids, function(_, id) {
-          $form.append('<input type="hidden" name="ids[]" value="' + id + '">');
-        });
-        $form.appendTo('body').submit();
-      });
-    };
-
-    window.bulkAction = function(actionIndex) {
-      var ids = $('.item-check:checked').map(function() { return this.value; }).get();
-      if (!ids.length) return;
-      var csrf = $('meta[name="csrf-token"]').attr('content') || '';
-      var $form = $('<form method="POST">').attr('action', PREFIX + '/' + SLUG + '/bulk-action');
-      $form.append('<input name="_csrf" value="' + csrf + '">');
-      $form.append('<input type="hidden" name="actionIndex" value="' + actionIndex + '">');
-      $.each(ids, function(_, id) {
-        $form.append('<input type="hidden" name="ids[]" value="' + id + '">');
-      });
-      $form.appendTo('body').submit();
-    };
-
-    // ── UI.Dropdown — portal-rendered action menus ────────────────────────────
-    // Wire export menu
-    var $exportBtn   = $('#export-menu-btn');
-    var $exportPanel = $('#export-menu-panel');
-    if ($exportBtn.length && $exportPanel.length) {
-      var exportDd = UI.Dropdown.create({
-        anchor:    $exportBtn[0],
-        content:   $exportPanel[0],
-        placement: 'bottom-end',
-        offset:    4,
-      });
-      $exportBtn.on('click', function() { exportDd.toggle(); });
-    }
-
-    // Wire per-row action menus
-    $('.ui-menu').each(function() {
-      var $menu  = $(this);
-      var $btn   = $menu.find('.ui-menu-trigger');
-      var $panel = $menu.find('.ui-menu-panel');
-      if (!$btn.length || !$panel.length) return;
-
-      var dd = UI.Dropdown.create({
-        anchor:    $btn[0],
-        content:   $panel[0],
-        placement: 'bottom-end',
-        offset:    4,
-      });
-
-      $btn.on('click', function(e) {
-        e.stopPropagation();
-        dd.toggle();
-      });
-
-      $panel.find('[data-confirm-delete]').on('click', function() {
-        dd.close();
-        confirmDelete($(this).data('confirm-delete'), $(this).data('confirm-label'));
-      });
-
-      $panel.find('[data-row-action]').on('click', function() {
-        dd.close();
-        var url   = $(this).data('row-action');
-        var label = $(this).data('row-action-label');
-        UI.Confirm.show({
-          title:   label,
-          message: 'Run <strong>' + label + '</strong> on this record?',
-          confirm: label,
-        }).then(function(ok) {
-          if (!ok) return;
-          var csrf = $('meta[name="csrf-token"]').attr('content') || '';
-          var $form = $('<form method="POST">').attr('action', url);
-          $form.append('<input name="_csrf" value="' + csrf + '">');
-          $form.appendTo('body').submit();
-        });
-      });
-
-      // ── Right-click on the row opens a context menu at the cursor ──────────
-      (function($menuPanel) {
-        var $row = $menuPanel.closest('tr');
-
-        $row.on('contextmenu', function(e) {
-          e.preventDefault();
-          e.stopPropagation();
-
-          // Remove any existing portal
-          $('.context-menu-portal').remove();
-
-          // Build a fresh portal from the panel's inner HTML (avoids clone display:none)
-          var $p = $('<div class="ui-menu-panel context-menu-portal"></div>');
-          $p.html($menuPanel.html());
-          $p.css({
-            position: 'fixed',
-            top:      Math.min(e.clientY, window.innerHeight - 240) + 'px',
-            left:     Math.min(e.clientX, window.innerWidth  - 190) + 'px',
-            zIndex:   9999,
-          });
-          $('body').append($p);
-
-          // Wire handlers on the portal
-          $p.find('[data-confirm-delete]').on('click', function() {
-            $p.remove();
-            confirmDelete($(this).data('confirm-delete'), $(this).data('confirm-label'));
-          });
-          $p.find('[data-row-action]').on('click', function() {
-            $p.remove();
-            var _url   = $(this).data('row-action');
-            var _label = $(this).data('row-action-label');
-            UI.Confirm.show({
-              title:   _label,
-              message: 'Run <strong>' + _label + '</strong> on this record?',
-              confirm: _label,
-            }).then(function(ok) {
-              if (!ok) return;
-              var csrf = $('meta[name="csrf-token"]').attr('content') || '';
-              var $form = $('<form method="POST">').attr('action', _url);
-              $form.append('<input name="_csrf" value="' + csrf + '">');
-              $form.appendTo('body').submit();
-            });
-          });
-          $p.find('a.ui-menu-item').on('click', function() { $p.remove(); });
-
-          // Dismiss on next click anywhere or Escape
-          setTimeout(function() {
-            $(document).one('click.ctxmenu', function() { $p.remove(); });
-          }, 0);
-          $(document).one('keydown.ctxmenu', function(ev) {
-            if (ev.key === 'Escape') { $p.remove(); }
-          });
-        });
-      })($panel);
-    });
-  });
+  window.MILLAS_ADMIN_PREFIX      = '{{ adminPrefix }}';
+  window.MILLAS_RESOURCE_SLUG     = '{{ resource.slug }}';
+  window.MILLAS_HAS_ACTIVE_FILTERS = {% if activeFilters | length %}true{% else %}false{% endif %};
 </script>
+<script src="{{ adminPrefix }}/static/actions.js?v=2"></script>
+{% endblock %}
 
 <style>
   /* ── UI Menu (portal dropdown) ── */

package/src/admin/views/pages/login.njk

@@ -4,22 +4,19 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Sign In — {{ adminTitle }}</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
-      --bg:           #f0f2f5;
+      --bg:           #f6f7f8;
       --surface:      #ffffff;
       --border:       #e3e6ec;
       --border-soft:  #edf0f5;
-      --primary:      #2563eb;
-      --primary-h:    #1d4ed8;
-      --primary-soft: #eff4ff;
-      --primary-dim:  #dbeafe;
-      --text:         #111827;
-      --text-soft:    #374151;
+      --primary:      #f6821f;
+      --primary-h:    #e06d1a;
+      --primary-soft: #fff4e6;
+      --primary-dim:  #ffe4c4;
+      --text:         #172b4d;
+       --text-soft:    #2c3e50;
       --text-muted:   #6b7280;
       --text-xmuted:  #9ca3af;
       --danger:       #dc2626;
@@ -51,7 +48,7 @@
     .login-card {
       background: var(--surface);
       border: 1px solid var(--border);
-      border-radius: 14px;
+      border-radius: 6px;
       box-shadow: var(--shadow);
       width: 100%;
       max-width: 400px;
@@ -203,6 +200,15 @@
         radial-gradient(ellipse 60% 40% at 80% 90%, rgba(99,102,241,.05) 0%, transparent 60%);
       pointer-events: none;
     }
+    input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 100px white inset !important;
+  -webkit-text-fill-color: #000 !important;
+  caret-color: #000;
+  transition: background-color 5000s ease-in-out 0s;
+}
   </style>
 </head>
 <body>
@@ -210,13 +216,6 @@
   <div class="login-card">
 
     <div class="login-header">
-      <div class="login-logo">
-        <svg viewBox="0 0 24 24">
-          <ellipse cx="12" cy="5" rx="9" ry="3"/>
-          <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
-          <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
-        </svg>
-      </div>
       <div class="login-title">{{ adminTitle }}</div>
       <div class="login-subtitle">Sign in to your admin panel</div>
     </div>
@@ -270,7 +269,7 @@
               autocomplete="current-password"
               required
               style="padding-right: 40px">
-            <button type="button" class="pw-toggle" onclick="togglePw()" aria-label="Toggle password visibility">
+            <button type="button" class="pw-toggle" aria-label="Toggle password visibility">
               <svg id="pw-icon" viewBox="0 0 24 24">
                 <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                 <circle cx="12" cy="12" r="3"/>
@@ -304,51 +303,7 @@
 
   </div>
 
-  <script>
-    function togglePw() {
-      const input = document.getElementById('password');
-      const icon  = document.getElementById('pw-icon');
-      const isHidden = input.type === 'password';
-      input.type = isHidden ? 'text' : 'password';
-      icon.innerHTML = isHidden
-        ? `<path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/>`
-        : `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`;
-    }
-
-    // Submit loading state + basic client validation
-    document.getElementById('login-form').addEventListener('submit', function(e) {
-      const email    = document.getElementById('email').value.trim();
-      const password = document.getElementById('password').value;
-
-      if (!email || !password) {
-        e.preventDefault();
-        const existing = document.getElementById('login-error');
-        const msg = !email ? 'Email is required.' : 'Password is required.';
-        if (existing) {
-          existing.querySelector('svg + *')
-            ? (existing.lastChild.textContent = msg)
-            : (existing.innerHTML += ` ${msg}`);
-        } else {
-          const el = document.createElement('div');
-          el.className = 'alert alert-error';
-          el.id = 'login-error';
-          el.innerHTML = `<svg viewBox="0 0 24 24" width="15" height="15"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg> ${msg}`;
-          this.insertBefore(el, this.firstChild);
-        }
-        return;
-      }
-
-      const btn  = document.getElementById('login-btn');
-      const icon = document.getElementById('login-icon');
-      btn.disabled = true;
-      icon.innerHTML = `<circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="32" class="spin"/>`;
-      btn.lastChild.textContent = ' Signing in…';
-    });
-
-    // Auto-focus password if email is pre-filled
-    const emailVal = document.getElementById('email').value;
-    if (emailVal) document.getElementById('password').focus();
-  </script>
+  <script src="{{ adminPrefix }}/static/login.js?v=1"></script>
 
 </body>
 </html>

package/src/admin/views/partials/form-field.njk

@@ -42,7 +42,7 @@
     {% if hasError %}
     <span class="form-error">
       <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-      {{ errors[field.name][0] if errors[field.name] is iterable else errors[field.name] }}
+      {{ errors[field.name] if errors[field.name] is string else errors[field.name][0] }}
     </span>
     {% elif field.help %}
     <span class="form-help">{{ field.help }}</span>