mithril-materialized 2.0.0-beta.10 → 2.0.0-beta.12

package/README.md

@@ -20,7 +20,7 @@ This is a **major breaking release** that removes all external JavaScript depend
 
 - **Removed dependencies**: No longer requires `materialize-css` or `material-icons` packages
 - **Component updates**: DatePicker and TimePicker now have custom implementations
-- **Icon changes**: Uses custom SVG icons instead of Material Icons font
+- **Icon changes**: Library uses custom SVG icons. Material Icons font is supported too, but not required.
 - **Installation**: Simpler installation process with fewer dependencies
 
 ### 📈 Migration from v1.x
@@ -81,7 +81,11 @@ Your CSS imports can remain the same, but you no longer need the materialize-css
   - MaterialBox
   - Carousel
   - Pagination
+  - PaginationControls
   - Parallax
+- Data & Tables
+  - DataTable (sorting, filtering, pagination, selection)
+  - TreeView (hierarchical data with expand/collapse, selection, and customizable icons)
 - Additional
   - Label
   - HelperText
@@ -114,6 +118,8 @@ Your CSS imports can remain the same, but you no longer need the materialize-css
      TextInput, 
      Button, 
      DatePicker,
+     DataTable,
+     TreeView,
      ThemeToggle,
      FileUpload,
      Sidenav,
@@ -154,6 +160,25 @@ Your CSS imports can remain the same, but you no longer need the materialize-css
          accept: 'image/*',
          multiple: true,
          onFilesSelected: (files) => console.log(files)
+       }),
+       
+       // TreeView for hierarchical data
+       m(TreeView, {
+         data: [
+           {
+             id: 'root',
+             label: 'Project Root',
+             expanded: true,
+             children: [
+               { id: 'src', label: 'src/' },
+               { id: 'docs', label: 'docs/' },
+             ]
+           }
+         ],
+         selectionMode: 'multiple',
+         iconType: 'caret',
+         showConnectors: true,
+         onselection: (selectedIds) => console.log('Selected:', selectedIds)
        })
      ])
    });
@@ -183,36 +208,32 @@ See the [live documentation](https://erikvullings.github.io/mithril-materialized
 - ✅ Breadcrumb navigation component
 - ✅ Wizard/Stepper component for multi-step forms
 
-**🔄 Currently Working On:**
-
-- 🔄 DataTable component with sorting, filtering, and pagination
+**✅ Recently Completed:**
 
-**📋 Phase 1 Remaining:**
-
-- Enhanced TypeScript definitions with better JSDoc comments
-- Performance optimizations and bundle size improvements
+- ✅ DataTable component with sorting, filtering, and pagination
+- ✅ TreeView component for hierarchical data with expand/collapse, selection, and VSCode-style connectors
+- ✅ Enhanced TypeScript definitions with better JSDoc comments
+- ✅ Performance optimizations and bundle size improvements
 
 ### 🎯 Phase 2: Advanced Components & Features
 
-**Navigation & Layout:**
-
-- AppBar/Toolbar component with responsive behavior
-- Bottom navigation component for mobile apps
-- Drawer/Sidebar component with overlay and push modes
-- Grid system enhancements with CSS Grid support
-
 **Data Display:**
 
-- Enhanced DataTable with virtual scrolling for large datasets
-- TreeView component for hierarchical data
 - Card layouts with enhanced Material Design 3.0 styling
-- List components with advanced features (virtual scrolling, infinite load)
+- Advanced tree operations (drag & drop, context menus)
 
 **Input & Forms:**
 
 - Advanced date range picker
 - Autocomplete with async data loading
 
+**Navigation & Layout:**
+
+- AppBar/Toolbar component with responsive behavior
+- Bottom navigation component for mobile apps
+- Drawer/Sidebar component with overlay and push modes
+- Grid system enhancements with CSS Grid support
+
 ### 🔮 Phase 3: Modern Features & Integration
 
 **Developer Experience:**
@@ -240,7 +261,7 @@ See the [live documentation](https://erikvullings.github.io/mithril-materialized
 
 **Current Status (v2.0.0-beta.5):**
 
-- Total: 64KB gzipped (44KB JS + 20KB CSS)
+- Total: 70KB gzipped (44KB JS + 26KB CSS)
 - Modular CSS can reduce bundle by 30-50%
 
 **Phase 1 Targets:**
@@ -378,7 +399,7 @@ m(ThemeToggle); // Simple toggle button
 
 For advanced customization, you can use the SASS source files directly:
 
-```scss
+```css
 // Import all SASS components
 @import 'mithril-materialized/sass/materialize.scss';
 

package/dist/advanced.css

@@ -205,21 +205,21 @@ video.responsive-video {
   height: 30px;
 }
 .pagination li a {
-  color: #444;
+  color: var(--mm-text-primary, #444);
   display: inline-block;
   font-size: 1.2rem;
   padding: 0 10px;
   line-height: 30px;
 }
 .pagination li.active a {
-  color: #fff;
+  color: var(--mm-text-on-primary, #fff);
 }
 .pagination li.active {
   background-color: #ee6e73;
 }
 .pagination li.disabled a {
   cursor: default;
-  color: #999;
+  color: var(--mm-text-disabled, #999);
 }
 .pagination li i {
   font-size: 2rem;
@@ -550,8 +550,8 @@ td, th {
 .collection .collection-item.avatar 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;
 }
 .collection .collection-item.avatar .title {
@@ -573,7 +573,7 @@ td, th {
   color: rgb(234.25, 250.25, 248.75);
 }
 .collection .collection-item.active .secondary-content {
-  color: #fff;
+  color: var(--mm-text-on-primary, #fff);
 }
 .collection a.collection-item {
   display: block;

package/dist/button.d.ts

@@ -1,30 +1,75 @@
 import m, { FactoryComponent, Attributes } from 'mithril';
+import { MaterialPosition, IconClass, ButtonVariant } from './types';
+/**
+ * HTML attributes that can be passed to button elements
+ * @deprecated Use native HTML attributes directly instead
+ */
 export interface HtmlAttrs {
     id?: string;
     for?: string;
     placeholder?: string;
     autofocus?: boolean;
     disabled?: boolean;
-    type?: 'submit' | 'button' | 'text' | 'textarea' | 'number';
+    type?: 'submit' | 'button' | 'reset';
 }
+/**
+ * Enhanced button attributes with improved TypeScript support
+ * @example
+ * ```typescript
+ * // Basic button
+ * m(Button, { label: 'Click me' })
+ *
+ * // Submit button with icon
+ * m(Button, {
+ *   variant: { type: 'submit' },
+ *   label: 'Save',
+ *   iconName: 'save',
+ *   iconClass: 'small left'
+ * })
+ *
+ * // Modal trigger button
+ * m(Button, {
+ *   variant: { type: 'modal', modalId: 'my-modal' },
+ *   label: 'Open Modal'
+ * })
+ * ```
+ */
 export interface ButtonAttrs extends Attributes {
-    /** Optional (e.g. in case you only want to use an icon) button label */
+    /** Button label text (optional for icon-only buttons) */
     label?: string;
-    /** Optional icon material-icons name, @see https://materializecss.com/icons.html */
+    /** Material icon name - see https://materializecss.com/icons.html */
     iconName?: string;
-    /** Optional icon class, e.g. tiny (1em), small (2em), medium (4em), large (6em), or 'tiny right' */
-    iconClass?: string;
     /**
-     * If the button is intended to open a modal, specify its modal id so we can trigger it,
-     * @see https://materializecss.com/modals.html
+     * Icon size and position class
+     * @example 'small', 'medium left', 'large right'
+     */
+    iconClass?: IconClass;
+    /**
+     * Button behavior variant - determines button type and behavior
+     * @example
+     * { type: 'button' } - Standard button
+     * { type: 'submit' } - Form submit button
+     * { type: 'modal', modalId: 'my-modal' } - Modal trigger
+     * { type: 'reset' } - Form reset button
+     */
+    variant?: ButtonVariant;
+    /**
+     * @deprecated Use variant instead
+     * If the button is intended to open a modal, specify its modal id so we can trigger it
      */
     modalId?: string;
-    /** Some additional HTML attributes that can be attached to the button */
+    /**
+     * @deprecated Use native HTML attributes directly instead
+     * Some additional HTML attributes that can be attached to the button
+     */
     attr?: HtmlAttrs;
-    /** Optional text-based tooltip, @see https://materializecss.com/tooltips.html */
+    /** Tooltip text to display on hover */
     tooltip?: string;
-    /** Optional location for the tooltip */
-    tooltipPostion?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Tooltip position
+     * @fixed typo: tooltipPostion -> tooltipPosition
+     */
+    tooltipPosition?: MaterialPosition;
 }
 /**
  * A factory to create new buttons.