mithril-materialized 2.0.0-beta.6 → 2.0.0-beta.8

package/dist/index.umd.js

@@ -1094,8 +1094,8 @@
                                     maxHeight: '200px',
                                     overflow: 'auto',
                                     zIndex: 1000,
-                                    backgroundColor: '#fff',
-                                    boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
+                                    backgroundColor: 'var(--mm-surface-color, #fff)',
+                                    boxShadow: '0 2px 2px 0 var(--mm-shadow-penumbra, rgba(0,0,0,0.14)), 0 3px 1px -2px var(--mm-shadow-umbra, rgba(0,0,0,0.12)), 0 1px 5px 0 var(--mm-shadow-ambient, rgba(0,0,0,0.2))',
                                 },
                             }, state.autocompleteItems.map((item, index) => m('li.autocomplete-item', {
                                 key: item.tag,
@@ -1103,7 +1103,8 @@
                                 style: {
                                     padding: '12px 16px',
                                     cursor: 'pointer',
-                                    backgroundColor: state.selectedAutocompleteIndex === index ? '#eee' : 'transparent',
+                                    backgroundColor: state.selectedAutocompleteIndex === index ? 'var(--mm-border-color, #eee)' : 'transparent',
+                                    color: 'var(--mm-text-primary, inherit)',
                                 },
                                 onmousedown: (e) => {
                                     e.preventDefault();
@@ -2324,7 +2325,7 @@
                         }, oncreate: ({ dom }) => {
                             const textarea = (state.textarea = dom);
                             // Set initial value and height if provided
-                            if (initialValue !== undefined) {
+                            if (initialValue) {
                                 textarea.value = String(initialValue);
                                 updateHeight(textarea);
                                 // } else {
@@ -2367,7 +2368,7 @@
                             if (onchange && state.textarea) {
                                 onchange(state.textarea.value);
                             }
-                        }, value: initialValue, onkeyup: onkeyup
+                        }, onkeyup: onkeyup
                             ? (ev) => {
                                 onkeyup(ev, ev.target.value);
                             }
@@ -2384,7 +2385,7 @@
                         label,
                         id,
                         isMandatory,
-                        isActive: ((_a = state.textarea) === null || _a === void 0 ? void 0 : _a.value) || initialValue || placeholder || state.active,
+                        isActive: ((_a = state.textarea) === null || _a === void 0 ? void 0 : _a.value) || placeholder || state.active,
                     }),
                     m(HelperText, {
                         helperText,
@@ -2452,7 +2453,7 @@
                                 input.focus();
                             }
                             // Set initial value if provided
-                            if (initialValue !== undefined) {
+                            if (initialValue) {
                                 input.value = String(initialValue);
                             }
                             // Update character count state for counter component
@@ -2556,14 +2557,13 @@
                             if (onchange && state.inputElement) {
                                 onchange(getValue(state.inputElement));
                             }
-                        }, value: initialValue })),
+                        } })),
                     m(Label, {
                         label,
                         id,
                         isMandatory,
                         isActive: state.active ||
                             ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) ||
-                            initialValue ||
                             placeholder ||
                             type === 'number' ||
                             type === 'color' ||
@@ -2642,7 +2642,7 @@
                                 i.value = initialValue;
                         },
                     })),
-                    (canClear || initialValue) &&
+                    (canClear || (i === null || i === void 0 ? void 0 : i.value)) &&
                         m('a.waves-effect.waves-teal.btn-flat', {
                             style: {
                                 float: 'right',
@@ -4383,13 +4383,9 @@
     /** CSS-only Tabs component - no MaterializeCSS dependencies */
     const Tabs = () => {
         const toAnchored = () => {
-            let activeTabFound = false;
             return (tab) => {
-                const active = activeTabFound ? false : tab.active;
-                if (active)
-                    activeTabFound = true;
                 const tabId = createId(tab.title, tab.id);
-                return Object.assign(Object.assign({}, tab), { active, tabId, anchorId: `anchor-${tabId}` });
+                return Object.assign(Object.assign({}, tab), { tabId, anchorId: `anchor-${tabId}` });
             };
         };
         const state = {
@@ -4400,7 +4396,9 @@
             indicatorStyle: {
                 left: '0px',
                 width: '0px',
-            }};
+            },
+            lastIndicatorUpdate: '',
+        };
         const createId = (title, id) => (id ? id : title.replace(/ /g, '').toLowerCase());
         const updateIndicator = () => {
             const tabElement = document.getElementById(state.activeTabId);
@@ -4422,6 +4420,7 @@
             }
         };
         const handleTabClick = (tabId, tabElement, attrs) => {
+            console.log({ state, tabId });
             if (state.activeTabId === tabId)
                 return;
             state.activeTabId = tabId;
@@ -4481,20 +4480,15 @@
             const selectedTab = selectedTabId ? anchoredTabs.find((a) => a.tabId === selectedTabId) : undefined;
             if (selectedTab) {
                 state.activeTabId = selectedTab.tabId;
-                selectedTab.active = true;
                 return selectedTab;
             }
-            const activeTab = anchoredTabs.find((t) => t.active);
-            if (activeTab) {
-                // Active tab property takes precedence over selectedTabId
-                state.activeTabId = activeTab.tabId;
-                return activeTab;
-            }
+            const curTab = state.activeTabId && anchoredTabs.find((a) => a.tabId === state.activeTabId);
+            if (curTab)
+                return curTab;
             // Default to first non-disabled tab
-            const firstAvailableTab = anchoredTabs.find((t) => !t.disabled && !t.href);
+            const firstAvailableTab = anchoredTabs.find((a) => !a.disabled && !a.href);
             if (firstAvailableTab) {
                 state.activeTabId = firstAvailableTab.tabId;
-                firstAvailableTab.active = true;
                 return firstAvailableTab;
             }
             return undefined;
@@ -4533,7 +4527,7 @@
                                 disabled,
                             }, m('a', {
                                 id: anchorId,
-                                className: tab.active ? 'active' : undefined,
+                                className: tab.tabId === state.activeTabId ? 'active' : undefined,
                                 target,
                                 href: href || `#${anchorId}`,
                                 onclick: disabled || href
@@ -4724,7 +4718,7 @@
                             placeholder &&
                             m('span.placeholder', {
                                 style: {
-                                    color: '#9e9e9e',
+                                    color: 'var(--mm-text-hint, #9e9e9e)',
                                     flexGrow: 1,
                                     padding: '8px 0',
                                 },
@@ -4786,7 +4780,9 @@
                                         fontSize: '0.875rem',
                                         border: 'none',
                                         padding: '8px 0',
-                                        borderBottom: '1px solid #9e9e9e',
+                                        borderBottom: '1px solid var(--mm-input-border, #9e9e9e)',
+                                        backgroundColor: 'transparent',
+                                        color: 'var(--mm-text-primary, inherit)',
                                     },
                                 }),
                             ]),

package/dist/tabs.d.ts

@@ -14,8 +14,6 @@ export interface TabItem {
     vnode?: Vnode<any, any>;
     /** ID of the tab element. Default the title in lowercase */
     id?: string;
-    /** If the tab should be active */
-    active?: boolean;
     /** If the tab should be disabled */
     disabled?: boolean;
     /** CSS class for the tab (li), default `.tab.col.s3` */

package/dist/utilities.css

@@ -2199,18 +2199,18 @@ table span.badge {
   height: 32px;
   font-size: 13px;
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
   line-height: 32px;
   padding: 0 12px;
   border-radius: 16px;
-  background-color: #e4e4e4;
+  background-color: var(--mm-chip-bg, #e4e4e4);
   margin-bottom: 5px;
   margin-right: 5px;
 }
 .chip:focus {
   outline: none;
-  background-color: #26a69a;
-  color: #fff;
+  background-color: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #fff);
 }
 .chip > img {
   float: left;
@@ -2229,7 +2229,7 @@ table span.badge {
 
 .chips {
   border: none;
-  border-bottom: 1px solid #9e9e9e;
+  border-bottom: 1px solid var(--mm-input-border, #9e9e9e);
   box-shadow: none;
   margin: 0 0 8px 0;
   min-height: 45px;
@@ -2237,8 +2237,8 @@ table span.badge {
   transition: all 0.3s;
 }
 .chips.focus {
-  border-bottom: 1px solid #26a69a;
-  box-shadow: 0 1px 0 0 #26a69a;
+  border-bottom: 1px solid var(--mm-primary-color, #26a69a);
+  box-shadow: 0 1px 0 0 var(--mm-primary-color, #26a69a);
 }
 .chips:hover {
   cursor: text;
@@ -2246,7 +2246,7 @@ table span.badge {
 .chips .input {
   background: none;
   border: 0;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.6));
   display: inline-block;
   font-size: 16px;
   height: 3rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.8",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/sass/components/_chips.scss

@@ -3,19 +3,19 @@
 .chip {
   &:focus {
     outline: none;
-    background-color: variables.$chip-selected-color;
-    color: #fff;
+    background-color: var(--mm-primary-color, variables.$chip-selected-color);
+    color: var(--mm-button-text, #fff);
   }
 
   display: inline-block;
   height: 32px;
   font-size: 13px;
   font-weight: 500;
-  color: rgba(0,0,0,.6);
+  color: var(--mm-text-secondary, rgba(0,0,0,.6));
   line-height: 32px;
   padding: 0 12px;
   border-radius: 16px;
-  background-color: variables.$chip-bg-color;
+  background-color: var(--mm-chip-bg, variables.$chip-bg-color);
   margin-bottom: variables.$chip-margin;
   margin-right: variables.$chip-margin;
 
@@ -38,7 +38,7 @@
 
 .chips {
   border: none;
-  border-bottom: 1px solid variables.$chip-border-color;
+  border-bottom: 1px solid var(--mm-input-border, variables.$chip-border-color);
   box-shadow: none;
   margin: variables.$input-margin;
   min-height: 45px;
@@ -46,8 +46,8 @@
   transition: all .3s;
 
   &.focus {
-    border-bottom: 1px solid variables.$chip-selected-color;
-    box-shadow: 0 1px 0 0 variables.$chip-selected-color;
+    border-bottom: 1px solid var(--mm-primary-color, variables.$chip-selected-color);
+    box-shadow: 0 1px 0 0 var(--mm-primary-color, variables.$chip-selected-color);
   }
 
   &:hover {
@@ -57,7 +57,7 @@
   .input {
     background: none;
     border: 0;
-    color: rgba(0,0,0,.6);
+    color: var(--mm-text-primary, rgba(0,0,0,.6));
     display: inline-block;
     font-size: variables.$input-font-size;
     height: variables.$input-height;

package/sass/components/_dropdown.scss

@@ -10,7 +10,7 @@
 
 
   @extend .z-depth-1 !optional;
-  background-color: variables.$dropdown-bg-color;
+  background-color: var(--mm-surface-color, variables.$dropdown-bg-color);
   margin: 0;
   display: none;
   min-width: 100px;
@@ -25,7 +25,7 @@
 
   li {
     &:hover, &.active {
-      background-color: variables.$dropdown-hover-bg-color;
+      background-color: var(--mm-dropdown-hover, variables.$dropdown-hover-bg-color);
     }
 
     &:focus {
@@ -39,7 +39,7 @@
 
     & > a, & > span {
       font-size: 16px;
-      color: variables.$dropdown-color;
+      color: var(--mm-text-primary, variables.$dropdown-color);
       display: block;
       line-height: 22px;
       padding: math.div((variables.$dropdown-item-height - 22px), 2) 16px;
@@ -62,7 +62,7 @@
 
 
     clear: both;
-    color: variables.$off-black;
+    color: var(--mm-text-primary, variables.$off-black);
     cursor: pointer;
     min-height: variables.$dropdown-item-height;
     line-height: 1.5rem;
@@ -73,7 +73,7 @@
 
 body.keyboard-focused {
   .dropdown-content li:focus {
-    background-color: color.adjust(variables.$dropdown-hover-bg-color, $lightness: -8%);
+    background-color: var(--mm-dropdown-focus, color.adjust(variables.$dropdown-hover-bg-color, $lightness: -8%));
   }
 }
 

package/sass/components/_theme-variables.scss

@@ -48,6 +48,15 @@
   
   // Shadow colors
   --mm-shadow-color: rgba(0, 0, 0, 0.16);
+  
+  // Chip colors
+  --mm-chip-bg: #e4e4e4;
+  --mm-chip-text: var(--mm-text-secondary);
+  
+  // Dropdown colors
+  --mm-dropdown-hover: #eee;
+  --mm-dropdown-focus: #ddd;
+  --mm-dropdown-selected: #e3f2fd;
   --mm-shadow-umbra: rgba(0, 0, 0, 0.2);
   --mm-shadow-penumbra: rgba(0, 0, 0, 0.14);
   --mm-shadow-ambient: rgba(0, 0, 0, 0.12);
@@ -123,6 +132,15 @@ body {
   --mm-shadow-penumbra: rgba(0, 0, 0, 0.36);
   --mm-shadow-ambient: rgba(0, 0, 0, 0.3);
   
+  // Chip colors
+  --mm-chip-bg: #424242;
+  --mm-chip-text: var(--mm-text-secondary);
+  
+  // Dropdown colors
+  --mm-dropdown-hover: #444;
+  --mm-dropdown-focus: #555;
+  --mm-dropdown-selected: #1e3a8a;
+  
   // Switch colors (dark theme)
   --mm-switch-checked-track: rgba(128, 203, 196, 0.3);
   --mm-switch-checked-thumb: #80cbc4;

package/sass/components/_timepicker.scss

@@ -179,7 +179,7 @@
 
 .timepicker-tick.active,
 .timepicker-tick:hover {
-	background-color: transparentize(variables.$secondary-color, .75);
+	background-color: color.scale(variables.$secondary-color, $alpha: -75%);
 }
 .timepicker-dial {
 	transition: transform 350ms, opacity 350ms;

package/sass/components/forms/_select.scss

@@ -86,7 +86,7 @@ select {
     bottom: 0;
     margin: auto 0;
     z-index: 0;
-    fill: rgba(0,0,0,.87);
+    fill: var(--mm-text-primary, rgba(0,0,0,.87));
   }
 
   & + label {
@@ -134,24 +134,24 @@ select:disabled {
 .select-dropdown li.disabled,
 .select-dropdown li.disabled > span,
 .select-dropdown li.optgroup {
-  color: variables.$select-disabled-color;
+  color: var(--mm-text-disabled, variables.$select-disabled-color);
   background-color: transparent;
 }
 
 body.keyboard-focused {
   .select-dropdown.dropdown-content li:focus {
-    background-color: variables.$select-option-focus;
+    background-color: var(--mm-dropdown-focus, variables.$select-option-focus);
   }
 }
 
 .select-dropdown.dropdown-content {
   li {
     &:hover {
-      background-color: variables.$select-option-hover;
+      background-color: var(--mm-dropdown-hover, variables.$select-option-hover);
     }
 
     &.selected {
-      background-color: variables.$select-option-selected;
+      background-color: var(--mm-dropdown-selected, variables.$select-option-selected);
     }
   }
 }
@@ -177,14 +177,14 @@ body.keyboard-focused {
 
 // Optgroup styles
 .select-dropdown li.optgroup {
-  border-top: 1px solid variables.$dropdown-hover-bg-color;
+  border-top: 1px solid var(--mm-border-color, variables.$dropdown-hover-bg-color);
 
   &.selected > span {
-    color: rgba(0, 0, 0, .7);
+    color: var(--mm-text-secondary, rgba(0, 0, 0, .7));
   }
 
   & > span {
-    color: rgba(0, 0, 0, .4);
+    color: var(--mm-text-hint, rgba(0, 0, 0, .4));
   }
 
   & ~ li.optgroup-option {