mithril-materialized 2.0.0-beta.7 → 2.0.0-beta.9

package/dist/index.umd.js

@@ -170,9 +170,14 @@
     const Label = () => {
         return {
             view: (_a) => {
-                var _b = _a.attrs, { label, id, isMandatory, isActive, className } = _b, params = __rest(_b, ["label", "id", "isMandatory", "isActive", "className"]);
+                var _b = _a.attrs, { label, id, isMandatory, isActive, className, initialValue } = _b, params = __rest(_b, ["label", "id", "isMandatory", "isActive", "className", "initialValue"]);
                 return label
-                    ? m('label', Object.assign(Object.assign({}, params), { className: [className, isActive ? 'active' : ''].filter(Boolean).join(' ').trim() || undefined, for: id }), [m.trust(label), isMandatory ? m(Mandatory) : undefined])
+                    ? m('label', Object.assign(Object.assign({}, params), { className: [className, isActive ? 'active' : ''].filter(Boolean).join(' ').trim() || undefined, for: id, oncreate: ({ dom }) => {
+                            if (!initialValue)
+                                return;
+                            const labelEl = dom;
+                            labelEl.classList.add('active');
+                        } }), [m.trust(label), isMandatory ? m(Mandatory) : undefined])
                     : undefined;
             },
         };
@@ -1094,8 +1099,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 +1108,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 +2330,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 +2373,7 @@
                             if (onchange && state.textarea) {
                                 onchange(state.textarea.value);
                             }
-                        }, value: initialValue, onkeyup: onkeyup
+                        }, onkeyup: onkeyup
                             ? (ev) => {
                                 onkeyup(ev, ev.target.value);
                             }
@@ -2384,7 +2390,8 @@
                         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,
+                        initialValue: initialValue !== undefined,
                     }),
                     m(HelperText, {
                         helperText,
@@ -2442,6 +2449,9 @@
                 const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, initialValue, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "initialValue", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate"]);
                 // const attributes = toAttrs(params);
                 const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim();
+                const isActive = state.active || ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) || placeholder || type === 'color' || type === 'range'
+                    ? true
+                    : false;
                 return m('.input-field', { className: cn, style }, [
                     iconName ? m('i.material-icons.prefix', iconName) : undefined,
                     m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id, 
@@ -2452,7 +2462,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,20 +2566,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' ||
-                            type === 'range'
-                            ? true
-                            : false,
+                        isActive,
+                        initialValue: initialValue !== undefined,
                     }),
                     m(HelperText, {
                         helperText,
@@ -2642,7 +2645,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',
@@ -4718,7 +4721,7 @@
                             placeholder &&
                             m('span.placeholder', {
                                 style: {
-                                    color: '#9e9e9e',
+                                    color: 'var(--mm-text-hint, #9e9e9e)',
                                     flexGrow: 1,
                                     padding: '8px 0',
                                 },
@@ -4780,7 +4783,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/label.d.ts

@@ -9,6 +9,8 @@ export interface LabelAttrs extends Attributes {
     isMandatory?: boolean;
     /** Add the active class to the label */
     isActive?: boolean | string;
+    /** Determines the initial value of its active state, only used during oncreate */
+    initialValue?: boolean;
 }
 /** Simple label element, used for most components. */
 export declare const Label: FactoryComponent<LabelAttrs>;

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.7",
+  "version": "2.0.0-beta.9",
   "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 {