npm - snice - Versions diffs - 1.14.3 → 2.1.0 - Mend

snice 1.14.3 → 2.1.0

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 (185) hide show

package/bin/templates/base/tsconfig.json +5 -4
package/components/accordion/demo.html +403 -0
package/components/accordion/snice-accordion-item.css +85 -0
package/components/accordion/snice-accordion-item.ts +226 -0
package/components/accordion/snice-accordion.css +31 -0
package/components/accordion/snice-accordion.ts +182 -0
package/components/accordion/snice-accordion.types.ts +32 -0
package/components/alert/demo.html +445 -0
package/components/alert/snice-alert.css +195 -0
package/components/alert/snice-alert.ts +141 -0
package/components/alert/snice-alert.types.ts +12 -0
package/components/avatar/demo.html +598 -0
package/components/avatar/snice-avatar.css +131 -0
package/components/avatar/snice-avatar.ts +136 -0
package/components/avatar/snice-avatar.types.ts +13 -0
package/components/badge/demo.html +523 -0
package/components/badge/snice-badge.css +161 -0
package/components/badge/snice-badge.ts +117 -0
package/components/badge/snice-badge.types.ts +16 -0
package/components/breadcrumbs/demo.html +404 -0
package/components/breadcrumbs/snice-breadcrumbs.css +133 -0
package/components/breadcrumbs/snice-breadcrumbs.ts +191 -0
package/components/breadcrumbs/snice-breadcrumbs.types.ts +26 -0
package/components/breadcrumbs/snice-crumb.ts +26 -0
package/components/button/demo.html +42 -0
package/components/button/snice-button.css +230 -0
package/components/button/snice-button.ts +169 -0
package/components/button/snice-button.types.ts +25 -0
package/components/card/demo.html +525 -0
package/components/card/snice-card.css +140 -0
package/components/card/snice-card.ts +102 -0
package/components/card/snice-card.types.ts +10 -0
package/components/checkbox/demo.html +253 -0
package/components/checkbox/snice-checkbox.css +164 -0
package/components/checkbox/snice-checkbox.ts +223 -0
package/components/checkbox/snice-checkbox.types.ts +22 -0
package/components/chip/demo.html +383 -0
package/components/chip/snice-chip.css +195 -0
package/components/chip/snice-chip.ts +139 -0
package/components/chip/snice-chip.types.ts +15 -0
package/components/date-picker/README.md +233 -0
package/components/date-picker/demo.html +191 -0
package/components/date-picker/snice-date-picker.css +330 -0
package/components/date-picker/snice-date-picker.ts +777 -0
package/components/date-picker/snice-date-picker.types.ts +83 -0
package/components/divider/demo.html +233 -0
package/components/divider/snice-divider.css +155 -0
package/components/divider/snice-divider.ts +69 -0
package/components/divider/snice-divider.types.ts +15 -0
package/components/drawer/demo.html +328 -0
package/components/drawer/snice-drawer.css +476 -0
package/components/drawer/snice-drawer.ts +287 -0
package/components/drawer/snice-drawer.types.ts +17 -0
package/components/global.d.ts +14 -0
package/components/input/demo.html +303 -0
package/components/input/snice-input.css +257 -0
package/components/input/snice-input.ts +442 -0
package/components/input/snice-input.types.ts +59 -0
package/components/input/test.html +77 -0
package/components/layout/README.md +260 -0
package/components/layout/demo.html +538 -0
package/components/layout/snice-layout-blog.css +129 -0
package/components/layout/snice-layout-blog.ts +48 -0
package/components/layout/snice-layout-card.css +104 -0
package/components/layout/snice-layout-card.ts +35 -0
package/components/layout/snice-layout-centered.css +51 -0
package/components/layout/snice-layout-centered.ts +22 -0
package/components/layout/snice-layout-dashboard.css +98 -0
package/components/layout/snice-layout-dashboard.ts +45 -0
package/components/layout/snice-layout-fullscreen.css +72 -0
package/components/layout/snice-layout-fullscreen.ts +34 -0
package/components/layout/snice-layout-landing.css +92 -0
package/components/layout/snice-layout-landing.ts +47 -0
package/components/layout/snice-layout-minimal.css +16 -0
package/components/layout/snice-layout-minimal.ts +19 -0
package/components/layout/snice-layout-sidebar.css +117 -0
package/components/layout/snice-layout-sidebar.ts +48 -0
package/components/layout/snice-layout-split.css +103 -0
package/components/layout/snice-layout-split.ts +29 -0
package/components/layout/snice-layout.css +72 -0
package/components/layout/snice-layout.ts +35 -0
package/components/layout/snice-layout.types.ts +5 -0
package/components/login/demo-auth-controller.ts +185 -0
package/components/login/demo.html +470 -0
package/components/login/snice-login.css +204 -0
package/components/login/snice-login.ts +337 -0
package/components/login/snice-login.types.ts +34 -0
package/components/modal/demo.html +291 -0
package/components/modal/snice-modal.css +203 -0
package/components/modal/snice-modal.ts +233 -0
package/components/modal/snice-modal.types.ts +21 -0
package/components/pagination/demo.html +395 -0
package/components/pagination/snice-pagination.ts +333 -0
package/components/pagination/snice-pagination.types.ts +21 -0
package/components/progress/demo.html +510 -0
package/components/progress/snice-progress.css +267 -0
package/components/progress/snice-progress.ts +247 -0
package/components/progress/snice-progress.types.ts +19 -0
package/components/radio/demo.html +287 -0
package/components/radio/snice-radio.css +171 -0
package/components/radio/snice-radio.ts +218 -0
package/components/radio/snice-radio.types.ts +21 -0
package/components/select/demo.html +511 -0
package/components/select/snice-option.ts +52 -0
package/components/select/snice-option.types.ts +14 -0
package/components/select/snice-select.css +392 -0
package/components/select/snice-select.ts +796 -0
package/components/select/snice-select.types.ts +55 -0
package/components/skeleton/demo.html +514 -0
package/components/skeleton/snice-skeleton.css +109 -0
package/components/skeleton/snice-skeleton.ts +126 -0
package/components/skeleton/snice-skeleton.types.ts +11 -0
package/components/switch/demo.html +284 -0
package/components/switch/snice-switch.css +221 -0
package/components/switch/snice-switch.ts +229 -0
package/components/switch/snice-switch.types.ts +23 -0
package/components/symbols.ts +23 -0
package/components/table/demo-table-controller.ts +100 -0
package/components/table/demo.html +480 -0
package/components/table/snice-cell-boolean.ts +112 -0
package/components/table/snice-cell-date.ts +210 -0
package/components/table/snice-cell-duration.ts +91 -0
package/components/table/snice-cell-filesize.ts +90 -0
package/components/table/snice-cell-number.ts +165 -0
package/components/table/snice-cell-progress.ts +83 -0
package/components/table/snice-cell-rating.ts +82 -0
package/components/table/snice-cell-sparkline.ts +253 -0
package/components/table/snice-cell-text.ts +125 -0
package/components/table/snice-cell.css +296 -0
package/components/table/snice-cell.ts +473 -0
package/components/table/snice-column.ts +353 -0
package/components/table/snice-header.css +243 -0
package/components/table/snice-header.ts +261 -0
package/components/table/snice-progress.ts +66 -0
package/components/table/snice-rating.ts +45 -0
package/components/table/snice-row.css +255 -0
package/components/table/snice-row.ts +331 -0
package/components/table/snice-table.css +241 -0
package/components/table/snice-table.ts +737 -0
package/components/table/snice-table.types.ts +158 -0
package/components/tabs/demo.html +487 -0
package/components/tabs/snice-tab-panel.css +264 -0
package/components/tabs/snice-tab-panel.ts +47 -0
package/components/tabs/snice-tab.css +96 -0
package/components/tabs/snice-tab.ts +65 -0
package/components/tabs/snice-tabs.css +189 -0
package/components/tabs/snice-tabs.ts +332 -0
package/components/tabs/snice-tabs.types.ts +28 -0
package/components/theme/theme.css +234 -0
package/components/toast/demo.html +329 -0
package/components/toast/snice-toast-container.ts +256 -0
package/components/toast/snice-toast.css +213 -0
package/components/toast/snice-toast.ts +276 -0
package/components/toast/snice-toast.types.ts +35 -0
package/components/tooltip/demo.html +350 -0
package/components/tooltip/snice-tooltip-portal.css +79 -0
package/components/tooltip/snice-tooltip.css +117 -0
package/components/tooltip/snice-tooltip.ts +612 -0
package/components/tooltip/snice-tooltip.types.ts +32 -0
package/components/transitions.ts +94 -0
package/components/tsconfig.json +18 -0
package/dist/index.cjs +441 -329
package/dist/index.cjs.map +1 -1
package/dist/index.cjs.min.map +1 -1
package/dist/index.esm.js +441 -329
package/dist/index.esm.js.map +1 -1
package/dist/index.esm.min.js +3 -3
package/dist/index.esm.min.js.map +1 -1
package/dist/index.iife.js +441 -329
package/dist/index.iife.js.map +1 -1
package/dist/index.iife.min.js +3 -3
package/dist/index.iife.min.js.map +1 -1
package/dist/symbols.esm.js +1 -1
package/dist/transitions.esm.js +1 -1
package/dist/types/controller.d.ts +1 -1
package/dist/types/element.d.ts +10 -10
package/dist/types/events.d.ts +2 -2
package/dist/types/index.d.ts +1 -1
package/dist/types/observe.d.ts +1 -1
package/dist/types/request-response.d.ts +2 -3
package/dist/types/router.d.ts +1 -1
package/package.json +9 -3
package/dist/index.cjs.min +0 -15
package/dist/symbols.cjs +0 -103
package/dist/transitions.cjs +0 -219

package/components/pagination/demo.html ADDED Viewed

@@ -0,0 +1,395 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Snice Pagination Demo</title>
+  <style>
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 40px 20px;
+      background: #f3f4f6;
+    }
+    h1 {
+      color: #111827;
+      margin-bottom: 32px;
+    }
+    .demo-section {
+      background: white;
+      padding: 24px;
+      border-radius: 12px;
+      margin-bottom: 32px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    }
+    .demo-section h2 {
+      color: #374151;
+      margin-top: 0;
+      margin-bottom: 20px;
+      font-size: 20px;
+    }
+    .demo-row {
+      margin-bottom: 24px;
+    }
+    .demo-label {
+      font-size: 14px;
+      color: #6b7280;
+      margin-bottom: 8px;
+    }
+    .demo-controls {
+      display: flex;
+      gap: 12px;
+      margin-top: 20px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    .demo-control {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .demo-control label {
+      font-size: 14px;
+      color: #6b7280;
+    }
+    .demo-control input[type="number"] {
+      width: 80px;
+      padding: 4px 8px;
+      border: 1px solid #e5e7eb;
+      border-radius: 4px;
+      font-size: 14px;
+    }
+    .demo-control select {
+      padding: 4px 8px;
+      border: 1px solid #e5e7eb;
+      border-radius: 4px;
+      font-size: 14px;
+      background: white;
+    }
+    .demo-button {
+      padding: 8px 16px;
+      background: #3b82f6;
+      color: white;
+      border: none;
+      border-radius: 6px;
+      font-size: 14px;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
+    .demo-button:hover {
+      background: #2563eb;
+    }
+    .event-log {
+      margin-top: 16px;
+      padding: 12px;
+      background: #f9fafb;
+      border: 1px solid #e5e7eb;
+      border-radius: 6px;
+      font-family: monospace;
+      font-size: 13px;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+    .event-log-entry {
+      padding: 4px 0;
+      border-bottom: 1px solid #e5e7eb;
+    }
+    .event-log-entry:last-child {
+      border-bottom: none;
+    }
+    code {
+      background: #f3f4f6;
+      padding: 2px 4px;
+      border-radius: 3px;
+      font-size: 13px;
+    }
+  </style>
+  <script type="module">
+    import '../../src/index.ts';
+    import './snice-pagination.ts';
+    window.addEventListener('DOMContentLoaded', () => {
+      // Get pagination elements
+      const basicPagination = document.getElementById('basic-pagination');
+      const advancedPagination = document.getElementById('advanced-pagination');
+      const customPagination = document.getElementById('custom-pagination');
+      // Event logging
+      const eventLog = document.getElementById('event-log');
+      let eventCounter = 0;
+      function logEvent(source, detail) {
+        eventCounter++;
+        const entry = document.createElement('div');
+        entry.className = 'event-log-entry';
+        entry.innerHTML = `[${eventCounter}] <strong>${source}:</strong> Page changed to ${detail.page} (previous: ${detail.previousPage})`;
+        eventLog.insertBefore(entry, eventLog.firstChild);
+        // Keep only last 10 entries
+        while (eventLog.children.length > 10) {
+          eventLog.removeChild(eventLog.lastChild);
+        }
+      }
+      // Listen for pagination events
+      basicPagination.addEventListener('@snice/pagination-change', (e) => {
+        logEvent('Basic', e.detail);
+      });
+      advancedPagination.addEventListener('@snice/pagination-change', (e) => {
+        logEvent('Advanced', e.detail);
+      });
+      customPagination.addEventListener('@snice/pagination-change', (e) => {
+        logEvent('Custom', e.detail);
+        document.getElementById('current-page').textContent = e.detail.page;
+      });
+      // Controls for customizable pagination
+      document.getElementById('update-pagination').addEventListener('click', () => {
+        const total = parseInt(document.getElementById('total-pages').value);
+        const current = parseInt(document.getElementById('current-page-input').value);
+        const siblings = parseInt(document.getElementById('siblings').value);
+        const size = document.getElementById('size-select').value;
+        const variant = document.getElementById('variant-select').value;
+        const showFirst = document.getElementById('show-first').checked;
+        const showLast = document.getElementById('show-last').checked;
+        const showPrev = document.getElementById('show-prev').checked;
+        const showNext = document.getElementById('show-next').checked;
+        customPagination.total = total;
+        customPagination.current = current;
+        customPagination.siblings = siblings;
+        customPagination.size = size;
+        customPagination.variant = variant;
+        customPagination.showFirst = showFirst;
+        customPagination.showLast = showLast;
+        customPagination.showPrev = showPrev;
+        customPagination.showNext = showNext;
+        document.getElementById('current-page').textContent = current;
+      });
+      // API method demonstrations
+      document.getElementById('go-to-5').addEventListener('click', () => {
+        customPagination.goToPage(5);
+      });
+      document.getElementById('next-page').addEventListener('click', () => {
+        customPagination.nextPage();
+      });
+      document.getElementById('prev-page').addEventListener('click', () => {
+        customPagination.previousPage();
+      });
+      document.getElementById('first-page').addEventListener('click', () => {
+        customPagination.firstPage();
+      });
+      document.getElementById('last-page').addEventListener('click', () => {
+        customPagination.lastPage();
+      });
+    });
+  </script>
+</head>
+<body>
+  <h1>Snice Pagination Component Demo</h1>
+  <div class="demo-section">
+    <h2>Basic Pagination</h2>
+    <div class="demo-row">
+      <div class="demo-label">Default pagination with 10 pages</div>
+      <snice-pagination
+        id="basic-pagination"
+        current="1"
+        total="10">
+      </snice-pagination>
+    </div>
+  </div>
+  <div class="demo-section">
+    <h2>Advanced Examples</h2>
+    <div class="demo-row">
+      <div class="demo-label">Large dataset (100 pages, current page 50)</div>
+      <snice-pagination
+        id="advanced-pagination"
+        current="50"
+        total="100"
+        siblings="1">
+      </snice-pagination>
+    </div>
+    <div class="demo-row">
+      <div class="demo-label">Small size, rounded variant</div>
+      <snice-pagination
+        current="3"
+        total="5"
+        size="small"
+        variant="rounded">
+      </snice-pagination>
+    </div>
+    <div class="demo-row">
+      <div class="demo-label">Large size, text variant</div>
+      <snice-pagination
+        current="2"
+        total="7"
+        size="large"
+        variant="text">
+      </snice-pagination>
+    </div>
+    <div class="demo-row">
+      <div class="demo-label">Without first/last buttons</div>
+      <snice-pagination
+        current="4"
+        total="10"
+        show-first="false"
+        show-last="false">
+      </snice-pagination>
+    </div>
+    <div class="demo-row">
+      <div class="demo-label">Without prev/next buttons</div>
+      <snice-pagination
+        current="3"
+        total="8"
+        show-prev="false"
+        show-next="false">
+      </snice-pagination>
+    </div>
+    <div class="demo-row">
+      <div class="demo-label">More siblings (shows more pages)</div>
+      <snice-pagination
+        current="10"
+        total="20"
+        siblings="3">
+      </snice-pagination>
+    </div>
+  </div>
+  <div class="demo-section">
+    <h2>Customizable Pagination</h2>
+    <div class="demo-row">
+      <snice-pagination
+        id="custom-pagination"
+        current="1"
+        total="20"
+        siblings="1">
+      </snice-pagination>
+      <p style="margin-top: 12px; color: #6b7280; font-size: 14px;">
+        Current page: <strong id="current-page">1</strong>
+      </p>
+    </div>
+    <div class="demo-controls">
+      <div class="demo-control">
+        <label>Total pages:</label>
+        <input type="number" id="total-pages" value="20" min="1" max="100">
+      </div>
+      <div class="demo-control">
+        <label>Current page:</label>
+        <input type="number" id="current-page-input" value="1" min="1">
+      </div>
+      <div class="demo-control">
+        <label>Siblings:</label>
+        <input type="number" id="siblings" value="1" min="0" max="5">
+      </div>
+      <div class="demo-control">
+        <label>Size:</label>
+        <select id="size-select">
+          <option value="small">Small</option>
+          <option value="medium" selected>Medium</option>
+          <option value="large">Large</option>
+        </select>
+      </div>
+      <div class="demo-control">
+        <label>Variant:</label>
+        <select id="variant-select">
+          <option value="default" selected>Default</option>
+          <option value="rounded">Rounded</option>
+          <option value="text">Text</option>
+        </select>
+      </div>
+    </div>
+    <div class="demo-controls">
+      <div class="demo-control">
+        <label>
+          <input type="checkbox" id="show-first" checked> Show First
+        </label>
+      </div>
+      <div class="demo-control">
+        <label>
+          <input type="checkbox" id="show-last" checked> Show Last
+        </label>
+      </div>
+      <div class="demo-control">
+        <label>
+          <input type="checkbox" id="show-prev" checked> Show Prev
+        </label>
+      </div>
+      <div class="demo-control">
+        <label>
+          <input type="checkbox" id="show-next" checked> Show Next
+        </label>
+      </div>
+      <button id="update-pagination" class="demo-button">Update Pagination</button>
+    </div>
+  </div>
+  <div class="demo-section">
+    <h2>API Methods</h2>
+    <p style="color: #6b7280; font-size: 14px; margin-bottom: 16px;">
+      Use these buttons to test the pagination API methods on the custom pagination above.
+    </p>
+    <div class="demo-controls">
+      <button id="go-to-5" class="demo-button">Go to Page 5</button>
+      <button id="next-page" class="demo-button">Next Page</button>
+      <button id="prev-page" class="demo-button">Previous Page</button>
+      <button id="first-page" class="demo-button">First Page</button>
+      <button id="last-page" class="demo-button">Last Page</button>
+    </div>
+  </div>
+  <div class="demo-section">
+    <h2>Event Log</h2>
+    <div class="demo-label">Listen for <code>@snice/pagination-change</code> events</div>
+    <div id="event-log" class="event-log">
+      <div class="event-log-entry" style="color: #6b7280;">
+        Pagination events will appear here...
+      </div>
+    </div>
+  </div>
+</body>
+</html>