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

package/dist/material-icon.d.ts

@@ -2,6 +2,9 @@ import { FactoryComponent, Attributes } from 'mithril';
 declare const iconPaths: {
     readonly caret: readonly ["M7 10l5 5 5-5z", "M0 0h24v24H0z"];
     readonly close: readonly ["M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z", "M0 0h24v24H0z"];
+    readonly chevron: readonly ["M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z", "M0 0h24v24H0z"];
+    readonly expand: readonly ["M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", "M0 0h24v24H0z"];
+    readonly collapse: readonly ["M19 13H5v-2h14v2z", "M0 0h24v24H0z"];
 };
 type IconName = keyof typeof iconPaths;
 export interface MaterialIconAttrs extends Attributes {

package/dist/treeview.d.ts

@@ -0,0 +1,39 @@
+import { FactoryComponent, Attributes } from 'mithril';
+import { EventHandler, SelectionMode } from './types';
+export interface TreeNode {
+    id: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    expanded?: boolean;
+    children?: TreeNode[];
+}
+export type TreeIconType = 'caret' | 'chevron' | 'plus-minus' | 'triangle';
+export interface TreeViewAttrs<T extends TreeNode = TreeNode> extends Attributes {
+    /** Tree data structure */
+    data: T[];
+    /** Selection mode - none, single, or multiple */
+    selectionMode?: SelectionMode;
+    /** Currently selected node IDs */
+    selectedIds?: string[];
+    /** Called when selection changes */
+    onselection?: EventHandler<string[]>;
+    /** Called when node is expanded/collapsed */
+    onexpand?: EventHandler<{
+        nodeId: string;
+        expanded: boolean;
+    }>;
+    /** Icon type for expand/collapse indicators */
+    iconType?: TreeIconType;
+    /** Show connecting lines between tree levels (VSCode-style) */
+    showConnectors?: boolean;
+    /** Allow keyboard navigation */
+    keyboardNavigation?: boolean;
+    /** Optional CSS class */
+    className?: string;
+    /** Optional inline styles */
+    style?: Record<string, any>;
+    /** Component ID */
+    id?: string;
+}
+export declare const TreeView: FactoryComponent<TreeViewAttrs>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "2.0.0-beta.11",
+  "version": "2.0.0-beta.12",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -97,4 +97,4 @@
     "typedoc": "^0.28.9",
     "typescript": "^5.9.2"
   }
-}
+}

package/sass/components/_treeview.scss

@@ -0,0 +1,353 @@
+/* TreeView Component Styles */
+
+// CSS Custom Properties for theming
+:root {
+  --tree-node-height: 36px;
+  --tree-indent-size: 24px;
+  --tree-connector-width: 1px;
+  --tree-expand-icon-size: 20px;
+  
+  // Light theme colors
+  --tree-bg-color: #ffffff;
+  --tree-text-color: #212121;
+  --tree-text-color-secondary: #757575;
+  --tree-border-color: #e0e0e0;
+  --tree-connector-color: #bdbdbd;
+  --tree-hover-bg: #f5f5f5;
+  --tree-selected-bg: #e3f2fd;
+  --tree-selected-color: #1976d2;
+  --tree-focused-outline: #2196f3;
+  --tree-disabled-color: #9e9e9e;
+  --tree-disabled-bg: #fafafa;
+}
+
+// Dark theme
+[data-theme="dark"], 
+.dark-theme,
+body.dark {
+  --tree-bg-color: #1e1e1e;
+  --tree-text-color: #e0e0e0;
+  --tree-text-color-secondary: #a0a0a0;
+  --tree-border-color: #333333;
+  --tree-connector-color: #555555;
+  --tree-hover-bg: #2d2d2d;
+  --tree-selected-bg: #282a45;
+  --tree-selected-color: #90caf9;
+  --tree-focused-outline: #64b5f6;
+  --tree-disabled-color: #616161;
+  --tree-disabled-bg: #2d2d2d;
+}
+
+.tree-view {
+  background-color: var(--tree-bg-color);
+  color: var(--tree-text-color);
+  border: 1px solid var(--tree-border-color);
+  border-radius: 4px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  
+  .tree-root {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .tree-node {
+    list-style: none;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    
+    &.disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+      
+      .tree-node-content {
+        pointer-events: none;
+        color: var(--tree-disabled-color);
+        background-color: var(--tree-disabled-bg);
+      }
+    }
+  }
+
+  .tree-node-content {
+    display: flex;
+    align-items: center;
+    min-height: var(--tree-node-height);
+    padding: 4px 8px;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease;
+    user-select: none;
+
+    &:hover:not(:disabled) {
+      background-color: var(--tree-hover-bg);
+    }
+  }
+
+  // Selected state
+  .tree-node.selected .tree-node-content {
+    background-color: var(--tree-selected-bg);
+    color: var(--tree-selected-color);
+    font-weight: 500;
+  }
+
+  // Focused state
+  .tree-node.focused .tree-node-content {
+    background-color: var(--tree-hover-bg);
+    border-right: 1px solid var(--tree-focused-outline);
+  }
+
+  .tree-node.selected.focused .tree-node-content {
+    background-color: var(--tree-selected-bg);
+  }
+
+  // VSCode-style connector lines (can be toggled via showConnectors prop)
+  &.show-connectors {
+    .tree-connectors {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    .tree-connector {
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: var(--tree-connector-width);
+      background-color: var(--tree-connector-color);
+      
+      // Horizontal connector to the node
+      &::after {
+        content: '';
+        position: absolute;
+        top: calc(var(--tree-node-height) / 2);
+        left: 0;
+        width: 12px;
+        height: var(--tree-connector-width);
+        background-color: var(--tree-connector-color);
+      }
+    }
+
+    // For the last child at the deepest level only, show half the vertical line
+    // But only if there are no more siblings at any parent level
+    .tree-node:last-child .tree-node-content .tree-connector:last-child {
+      height: calc(var(--tree-node-height) / 2 + 2px);
+    }
+
+    // Override for nodes that have siblings at parent levels - keep full height
+    .tree-node:not(.tree-last-in-branch) .tree-node-content .tree-connector {
+      height: 100% !important;
+    }
+  }
+
+  // Expand/collapse icon
+  .tree-expand-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--tree-expand-icon-size);
+    height: var(--tree-expand-icon-size);
+    margin-right: 8px;
+    margin-left: 2px;
+    cursor: pointer;
+    border-radius: 3px;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+
+    &:hover {
+      background-color: var(--tree-hover-bg);
+    }
+
+    // Plus/minus style
+    &.plus-minus {
+      .tree-plus-minus {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        border: 1px solid var(--tree-connector-color);
+        border-radius: 2px;
+        background-color: var(--tree-bg-color);
+        font-size: 12px;
+        font-weight: bold;
+        line-height: 1;
+        transition: all 0.2s ease;
+      }
+    }
+
+    // Triangle style
+    &.triangle {
+      .tree-triangle {
+        font-size: 10px;
+        transition: transform 0.2s ease;
+        color: var(--tree-text-color-secondary);
+        
+        &.expanded {
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+    // Caret/chevron style
+    .tree-caret-icon,
+    .tree-chevron-icon {
+      transition: transform 0.2s ease;
+    }
+  }
+
+  // Spacer for nodes without children to maintain alignment
+  .tree-expand-spacer {
+    width: var(--tree-expand-icon-size);
+    height: var(--tree-expand-icon-size);
+    margin-right: 8px;
+    margin-left: 2px;
+    flex-shrink: 0;
+  }
+
+  // Selection indicator (checkbox for multiple selection)
+  .tree-selection-indicator {
+    margin-right: 8px;
+    flex-shrink: 0;
+    
+    input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      margin: 0;
+      cursor: pointer;
+      accent-color: var(--tree-selected-color);
+    }
+  }
+
+  // Node icon
+  .tree-node-icon {
+    margin-right: 8px;
+    font-size: 18px;
+    color: var(--tree-text-color-secondary);
+    flex-shrink: 0;
+  }
+
+  // Node label
+  .tree-node-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Children container
+  .tree-children {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    transition: all 0.3s ease;
+
+    // Animation states
+    &.tree-collapsing {
+      max-height: 0;
+      opacity: 0;
+    }
+
+    &.tree-expanding {
+      max-height: 1000px; // Large enough value for content
+      opacity: 1;
+    }
+  }
+}
+
+// Smooth expand/collapse animations
+.tree-node {
+  .tree-children {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+// Animation keyframes
+@keyframes tree-expand {
+  from {
+    max-height: 0;
+    opacity: 0;
+  }
+  to {
+    max-height: 1000px;
+    opacity: 1;
+  }
+}
+
+@keyframes tree-collapse {
+  from {
+    max-height: 1000px;
+    opacity: 1;
+  }
+  to {
+    max-height: 0;
+    opacity: 0;
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .tree-view {
+    --tree-node-height: 40px;
+    --tree-indent-size: 20px;
+    
+    .tree-node-content {
+      padding: 0 12px;
+    }
+  }
+}
+
+// High contrast mode support
+@media (prefers-contrast: high) {
+  .tree-view {
+    --tree-border-color: #000000;
+    --tree-connector-color: #000000;
+    --tree-focused-outline: #0066cc;
+    
+    .tree-node-content:focus {
+      outline-width: 3px;
+    }
+  }
+}
+
+// Reduced motion support
+@media (prefers-reduced-motion: reduce) {
+  .tree-view {
+    .tree-children,
+    .tree-expand-icon .tree-triangle,
+    .tree-expand-icon .tree-caret-icon,
+    .tree-expand-icon .tree-plus-minus,
+    .tree-node-content {
+      transition: none;
+      animation: none;
+    }
+  }
+}
+
+// Print styles
+@media print {
+  .tree-view {
+    --tree-bg-color: white;
+    --tree-text-color: black;
+    --tree-border-color: black;
+    
+    .tree-expand-icon {
+      display: none;
+    }
+    
+    .tree-children {
+      display: block !important;
+      opacity: 1 !important;
+      max-height: none !important;
+    }
+  }
+}

package/sass/materialize.scss

@@ -47,3 +47,4 @@
 @use "components/breadcrumb";
 @use "components/wizard";
 @use "components/datatable";
+@use "components/treeview";