mithril-materialized 2.0.0-beta.9 → 2.0.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0-rc.2",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -36,9 +36,9 @@
   ],
   "scripts": {
     "build": "rollup -c rollup.config.mjs && npm run build:css-min",
-    "build:css-min": "sass --no-source-map --style=compressed ./src/index.scss ./dist/index.min.css && npm run build:css-modules",
+    "build:css-min": "sass --no-source-map --style=compressed --no-charset ./src/index.scss ./dist/index.min.css && npm run build:css-modules",
     "build:css-modules": "sass --no-source-map ./src/core.scss ./dist/core.css && sass --no-source-map ./src/components.scss ./dist/components.css && sass --no-source-map ./src/forms.scss ./dist/forms.css && sass --no-source-map ./src/pickers.scss ./dist/pickers.css && sass --no-source-map ./src/advanced.scss ./dist/advanced.css && sass --no-source-map ./src/utilities.scss ./dist/utilities.css",
-    "dev": "rollup -c rollup.config.mjs -w",
+    "dev": "concurrently \"rollup -c rollup.config.mjs -w\" \"npm run css:watch\"",
     "start": "npm run dev",
     "clean": "rimraf dist node_modules/.cache",
     "test": "jest",
@@ -54,6 +54,8 @@
     "build:domain": "npm run clean && npm run build && typedoc --out ../../docs/typedoc src",
     "dry-run": "npm publish --dry-run",
     "sass:watch": "sass --watch ./sass/materialize.scss ./dist/index.css",
+    "css:watch": "sass --watch --no-source-map --style=compressed --no-charset ./src/index.scss ./dist/index.min.css",
+    "dev:full": "npm run dev & npm run css:watch",
     "patch-release": "npm run clean && npm run build && npm version patch --force -m \"Patch release\" && npm publish && git push --follow-tags",
     "minor-release": "npm run clean && npm run build && npm version minor --force -m \"Minor release\" && npm publish && git push --follow-tags",
     "major-release": "npm run clean && npm run build && npm version major --force -m \"Major release\" && npm publish && git push --follow-tags"
@@ -69,29 +71,30 @@
   "author": "Erik Vullings <erik.vullings@gmail.com> (http://www.tno.nl)",
   "license": "MIT",
   "dependencies": {
-    "mithril": "^2.3.3"
+    "mithril": "^2.3.5"
   },
   "devDependencies": {
-    "@playwright/test": "^1.54.2",
+    "@playwright/test": "^1.55.0",
     "@rollup/plugin-typescript": "^12.1.4",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/mithril": "^2.2.7",
     "autoprefixer": "^10.4.21",
+    "concurrently": "^9.2.1",
     "express": "^5.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.0.5",
     "jest-environment-jsdom": "^30.0.5",
     "js-yaml": "^4.1.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.46.2",
+    "rollup": "^4.48.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.90.0",
+    "sass": "^1.91.0",
     "ts-jest": "^29.4.1",
     "tslib": "^2.8.1",
-    "typedoc": "^0.28.9",
+    "typedoc": "^0.28.11",
     "typescript": "^5.9.2"
   }
 }

package/sass/components/_cards.scss

@@ -8,13 +8,15 @@
   margin: variables.$element-top-margin 0 variables.$element-bottom-margin 0;
   border-radius: 2px;
   @extend .z-depth-1 !optional;
-  background-color: variables.$card-bg-color;
+  background-color: var(--mm-card-background, variables.$card-bg-color);
+  color: var(--mm-text-primary);
 }
 
 .card {
   position: relative;
   margin: variables.$element-top-margin 0 variables.$element-bottom-margin 0;
-  background-color: variables.$card-bg-color;
+  background-color: var(--mm-card-background, variables.$card-bg-color);
+  color: var(--mm-text-primary);
   transition: box-shadow .25s;
   border-radius: 2px;
   @extend .z-depth-1 !optional;
@@ -143,6 +145,8 @@
   .card-content {
     padding: variables.$card-padding;
     border-radius: 0 0 2px 2px;
+    background-color: var(--mm-card-background, variables.$card-bg-color);
+    color: var(--mm-text-primary);
 
     p {
       margin: 0;
@@ -151,6 +155,7 @@
       display: block;
       line-height: 32px;
       margin-bottom: 8px;
+      color: var(--mm-text-primary);
 
       i {
         line-height: 32px;
@@ -180,7 +185,8 @@
   .card-reveal {
     padding: variables.$card-padding;
     position: absolute;
-    background-color: variables.$card-bg-color;
+    background-color: var(--mm-card-background, variables.$card-bg-color);
+    color: var(--mm-text-primary);
     width: 100%;
     overflow-y: auto;
     left: 0;
@@ -192,6 +198,7 @@
     .card-title {
       cursor: pointer;
       display: block;
+      color: var(--mm-text-primary);
     }
   }
 }

package/sass/components/_datatable.scss

@@ -0,0 +1,417 @@
+@use "variables";
+
+// DataTable Container
+.datatable-container {
+  background: var(--mm-card-background);
+  color: var(--mm-text-primary);
+  border-radius: 4px;
+
+  .datatable-title {
+    color: var(--mm-text-primary);
+    font-weight: 400;
+    margin-bottom: 1rem;
+  }
+
+  .datatable-global-search {
+    padding-top: .5rem;
+  }
+
+  .datatable-wrapper {
+    position: relative;
+    background: var(--mm-card-background);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+    width: 100%;
+    -webkit-overflow-scrolling: touch; // Smooth scrolling on iOS
+    background: var(--mm-card-background);
+  }
+
+  // Loading State
+  .datatable-loading {
+    padding: 2rem;
+    text-align: center;
+    color: var(--mm-text-secondary);
+    background: var(--mm-card-background);
+
+    .preloader-wrapper {
+      margin-bottom: 1rem;
+    }
+  }
+
+  // Empty State
+  .datatable-empty {
+    padding: 3rem 2rem;
+    text-align: center;
+    color: var(--mm-text-secondary);
+    font-style: italic;
+    background: var(--mm-card-background);
+  }
+}
+
+// DataTable Specific Enhancements
+.datatable {
+  background: var(--mm-card-background);
+  color: var(--mm-text-primary);
+  border-collapse: collapse;
+  width: 100%;
+
+  // Table headers
+  thead {
+    background: var(--mm-card-background);
+    
+    th {
+      background: var(--mm-card-background);
+      color: var(--mm-text-primary);
+      border-bottom: 1px solid var(--mm-border-color);
+      font-weight: 500;
+      padding: 12px 16px;
+      text-align: left;
+    }
+  }
+
+  // Table body
+  tbody {
+    background: var(--mm-card-background);
+    
+    td {
+      background: var(--mm-card-background);
+      color: var(--mm-text-primary);
+      border-bottom: 1px solid var(--mm-border-color);
+      padding: 12px 16px;
+    }
+  }
+
+  // Sortable column headers
+  thead th.sortable {
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--mm-dropdown-hover);
+    }
+
+    .sort-indicators {
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      flex-direction: column;
+      line-height: 1;
+
+      .sort-icon {
+        font-size: 16px;
+        color: var(--mm-text-disabled);
+        transition: color 0.2s ease;
+
+        &.active {
+          color: var(--mm-primary-color);
+        }
+      }
+
+      .sort-asc {
+        margin-bottom: 0px;
+      }
+
+      .sort-desc {
+        margin-top: 0px;
+      }
+    }
+
+    // Add padding for sort icons
+    padding-right: 32px;
+  }
+
+  // Column alignment classes
+  .align-left {
+    text-align: left;
+  }
+
+  .align-center {
+    text-align: center;
+  }
+
+  .align-right {
+    text-align: right;
+  }
+
+  // Row hover effects
+  tbody tr {
+    transition: background-color 0.2s ease;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--mm-dropdown-hover);
+      
+      td {
+        background-color: var(--mm-dropdown-hover);
+      }
+    }
+  }
+
+  // Enhanced striped rows for dark theme
+  &.striped tbody tr:nth-child(odd) {
+    background-color: var(--mm-dropdown-focus);
+    
+    td {
+      background-color: var(--mm-dropdown-focus);
+    }
+    
+    &:hover {
+      background-color: var(--mm-dropdown-hover);
+      
+      td {
+        background-color: var(--mm-dropdown-hover);
+      }
+    }
+  }
+
+  // Selection styles
+  .selection-checkbox {
+    width: 40px;
+    text-align: center;
+    padding: 0 8px !important;
+    
+    label {
+      margin: 0;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    input[type="checkbox"] {
+      opacity: 1;
+      position: relative;
+      left: auto;
+      top: auto;
+      transform: none;
+      margin-right: 0;
+    }
+  }
+
+  // Selected row styles
+  tbody tr.selected {
+    background-color: var(--mm-dropdown-selected) !important;
+    
+    td {
+      background-color: var(--mm-dropdown-selected) !important;
+    }
+    
+    &:hover {
+      background-color: var(--mm-dropdown-selected) !important;
+      opacity: 0.9;
+      
+      td {
+        background-color: var(--mm-dropdown-selected) !important;
+        opacity: 0.9;
+      }
+    }
+  }
+
+  // Fixed header styles
+  &.fixed-header {
+    thead th {
+      position: sticky;
+      top: 0;
+      background: var(--mm-card-background);
+      z-index: 10;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+  }
+}
+
+// Pagination Component
+.datatable-pagination {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  background: var(--mm-card-background);
+  color: var(--mm-text-primary);
+  padding: 1rem;
+  border-top: 1px solid var(--mm-border-color);
+
+  .pagination-info {
+    color: var(--mm-text-secondary);
+    font-size: 0.9rem;
+    flex: 1;
+    min-width: 200px;
+  }
+
+  .pagination-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    button.btn-flat {
+      min-width: 40px;
+      height: 40px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      transition: background-color 0.2s ease;
+      background: transparent;
+      color: var(--mm-text-primary);
+      border: 1px solid var(--mm-border-color);
+
+      &:hover:not(:disabled) {
+        background-color: var(--mm-dropdown-hover);
+      }
+
+      &:disabled {
+        color: var(--mm-text-disabled);
+        cursor: not-allowed;
+        border-color: var(--mm-text-disabled);
+        opacity: 0.6;
+      }
+
+      i {
+        font-size: 20px;
+      }
+    }
+
+    .page-info {
+      margin: 0 0.5rem;
+      color: var(--mm-text-secondary);
+      font-weight: 500;
+      white-space: nowrap;
+    }
+  }
+}
+
+// Responsive enhancements
+@media #{variables.$medium-and-down} {
+  .datatable-container {
+    .datatable-search {
+      max-width: 100%;
+    }
+
+    .datatable-pagination {
+      flex-direction: column;
+      align-items: stretch;
+      text-align: center;
+
+      .pagination-info {
+        order: 2;
+        margin-top: 0.5rem;
+        text-align: center;
+      }
+
+      .pagination-controls {
+        order: 1;
+        justify-content: center;
+      }
+    }
+  }
+
+  // Enhanced responsive table
+  .datatable.responsive-table {
+    // Hide certain columns on mobile if needed
+    &.mobile-hide-secondary {
+      th:nth-child(n+4),
+      td:nth-child(n+4) {
+        display: none;
+      }
+    }
+
+    // Stack table cells on very small screens
+    @media #{variables.$small-and-down} {
+      &.mobile-stack {
+        thead {
+          display: none;
+        }
+
+        tbody tr {
+          display: block;
+          border: 1px solid var(--mm-border-color);
+          margin-bottom: 1rem;
+          padding: 1rem;
+          border-radius: 4px;
+          background: var(--mm-card-background);
+        }
+
+        tbody td {
+          display: block;
+          text-align: left !important;
+          padding: 0.5rem 0;
+          border: none;
+          
+          &::before {
+            content: attr(data-label) ": ";
+            font-weight: bold;
+            color: var(--mm-text-secondary);
+            display: inline-block;
+            min-width: 100px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Dark theme specific adjustments
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .datatable-container,
+  [data-theme="dark"] .datatable-container {
+    .datatable thead th.sortable:hover {
+      background-color: var(--mm-dropdown-hover);
+    }
+
+    .datatable tbody tr:hover {
+      background-color: var(--mm-dropdown-hover);
+    }
+
+    .datatable.striped tbody tr:nth-child(odd) {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+
+    .datatable.fixed-header thead th {
+      border-bottom: 1px solid var(--mm-border-color);
+    }
+  }
+}
+
+// Future: Virtual scrolling styles will be added in Phase 2
+
+// Performance optimizations
+.datatable {
+  // Use contain for better performance
+  contain: layout style paint;
+  
+  // Enable hardware acceleration for smooth scrolling
+  &.virtual-table {
+    transform: translateZ(0);
+    backface-visibility: hidden;
+  }
+
+  // Optimize row rendering
+  tbody tr {
+    // Use transform3d for better performance
+    transform: translateZ(0);
+    
+    // Optimize paint operations
+    will-change: transform;
+  }
+
+  // Optimize table layout
+  &.fixed-layout {
+    table-layout: fixed;
+    
+    th, td {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}

package/sass/components/_datepicker.scss

@@ -135,6 +135,37 @@
     font-size: 2.8rem;
     line-height: 47px;
     font-weight: 500;
+
+    &.placeholder {
+      font-size: 1.8rem;
+      line-height: 30px;
+      color: rgba(255, 255, 255, 0.7);
+      font-weight: 400;
+    }
+
+    .range-separator {
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 1.5rem;
+      font-weight: 400;
+    }
+
+    .end-date.placeholder {
+      color: rgba(255, 255, 255, 0.5);
+      font-style: italic;
+      font-size: 1.2rem;
+      font-weight: 300;
+    }
+  }
+
+  &.range-display {
+    .date-text {
+      font-size: 1.6rem;
+      line-height: 28px;
+      
+      .start-date, .end-date {
+        display: inline-block;
+      }
+    }
   }
 }
 
@@ -189,6 +220,32 @@
       color: var(--mm-button-text, #fff);
     }
 
+    // Range selection states
+    &.is-range-start {
+      background-color: var(--mm-primary-color, #26a69a);
+      color: var(--mm-button-text, #fff);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &.is-range-end {
+      background-color: var(--mm-primary-color, #26a69a);
+      color: var(--mm-button-text, #fff);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &.is-in-range {
+      background-color: var(--mm-primary-color-alpha-20, rgba(38, 166, 154, 0.2));
+      color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+      border-radius: 0;
+    }
+
+    &.is-range-preview {
+      background-color: var(--mm-primary-color-alpha-10, rgba(38, 166, 154, 0.1));
+      color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+    }
+
     &.is-outside-current-month,
     &.is-disabled {
       color: var(--mm-text-disabled, rgba(0, 0, 0, 0.3));

package/sass/components/_global.scss

@@ -177,20 +177,20 @@ video.responsive-video {
     height: 30px;
 
     a {
-      color: #444;
+      color: var(--mm-text-primary, #444);
       display: inline-block;
       font-size: 1.2rem;
       padding: 0 10px;
       line-height: 30px;
     }
 
-    &.active a { color: #fff; }
+    &.active a { color: var(--mm-text-on-primary, #fff); }
 
     &.active { background-color: variables.$primary-color; }
 
     &.disabled a {
       cursor: default;
-      color: #999;
+      color: var(--mm-text-disabled, #999);
     }
 
     i {
@@ -556,8 +556,8 @@ td, th{
       i.circle {
         font-size: 18px;
         line-height: 42px;
-        color: #fff;
-        background-color: #999;
+        color: var(--mm-text-on-primary, #fff);
+        background-color: var(--mm-text-disabled, #999);
         text-align: center;
       }
 
@@ -588,7 +588,7 @@ td, th{
       color: variables.$collection-active-color;
 
       .secondary-content {
-        color: #fff;
+        color: var(--mm-text-on-primary, #fff);
       }
     }
   }