refactor: Properly namespace all components / Examples fixup (google#4862)

Achieves consistency between using the overall library and using the
components a la carte.

* Refactor / Rename all components in source code / tests / docs /
  examples
* Fix up checkbox examples to use form field instead of old checkbox
  wrapper, which has been removed. Noticed when scanning examples to
  ensure namespacing didn't break anything.
* Add README for material-design-lite and vue example

Resolves google#4837
[#131998891]

Author: traviskaufman

demos/checkbox.html

@@ -139,7 +139,8 @@ <h2>Dark Theme</h2>
     <script>
       (function(global) {
         'use strict';
-        var checkbox = new global.mdl.Checkbox(document.getElementById('mdl-js-checkbox'));
+        var MDLCheckbox = global.mdl.checkbox.MDLCheckbox;
+        var checkbox = new MDLCheckbox(document.getElementById('mdl-js-checkbox'));
         document.getElementById('make-ind').addEventListener('click', function() {
           checkbox.indeterminate = true;
         });

demos/drawer/temporary-drawer.html

@@ -113,7 +113,8 @@ <h1 class="mdl-typography--display1">Temporary Drawer</h1>
 
     <script src="../assets/material-design-lite.js" charset="utf-8"></script>
     <script>
-      var drawer = new mdl.TemporaryDrawer(document.querySelector('.mdl-temporary-drawer'));
+      var MDLTemporaryDrawer = mdl.drawer.MDLTemporaryDrawer;
+      var drawer = new MDLTemporaryDrawer(document.querySelector('.mdl-temporary-drawer'));
       document.querySelector('.demo-menu').addEventListener('click', function() {
         drawer.open = true;
       });

demos/icon-toggle.html

@@ -133,7 +133,7 @@ <h2>Disabled Icons</h2>
 
         var nodes = document.querySelectorAll('.mdl-icon-toggle');
         for (var i = 0, node; node = nodes[i]; i++) {
-          mdl.IconToggle.attachTo(node);
+          mdl.iconToggle.MDLIconToggle.attachTo(node);
         }
 
         var addToFavorites = document.getElementById('add-to-favorites');

demos/index.html

@@ -36,8 +36,8 @@
           <li><a href="icon-toggle.html">Icon Toggle</a></li>
           <li><a href="list.html">List</a></li>
           <li><a href="radio.html">Radio</a></li>
-          <li><a href="snackbar.html">Snackbar</a></li>
           <li><a href="ripple.html">Ripple</a></li>
+          <li><a href="snackbar.html">Snackbar</a></li>
           <li><a href="textfield.html">Text Field</a></li>
           <li><a href="theme.html">Theme</a></li>
           <li><a href="typography.html">Typography</a></li>

demos/radio.html

@@ -173,9 +173,8 @@ <h2>Disabled</h2>
       (function(global) {
         'use strict';
         var radios = document.querySelectorAll('.mdl-radio:not([data-demo-no-js])');
-        var components = []
-        for (var i = 0; i < radios.length; i++) {
-          components.push(new global.mdl.Radio(radios[i]));
+        for (var i = 0, radio; radio = radios[i]; i++) {
+          global.mdl.radio.MDLRadio.attachTo(radio);
         }
       })(this);
     </script>

demos/ripple.html

@@ -126,7 +126,7 @@ <h2>Applied to <code>&lt;button&gt; element</h2>
     <script>
       (function(global) {
         [].forEach.call(document.querySelectorAll('.mdl-ripple-surface'), function(surface) {
-          mdl.Ripple.attachTo(surface);
+          mdl.ripple.MDLRipple.attachTo(surface);
         });
       })(this);
     </script>

demos/snackbar.html

@@ -113,8 +113,9 @@ <h2>Basic Example</h2>
     <script>
       (function(global) {
         'use strict';
-        var snackbar = new global.mdl.Snackbar(document.getElementById('mdl-js-snackbar'));
-        var rtlSnackbar = new global.mdl.Snackbar(document.getElementById('mdl-rtl-js-snackbar'));
+        var MDLSnackbar = global.mdl.snackbar.MDLSnackbar;
+        var snackbar = new MDLSnackbar(document.getElementById('mdl-js-snackbar'));
+        var rtlSnackbar = new MDLSnackbar(document.getElementById('mdl-rtl-js-snackbar'));
         var messageInput = document.getElementById('message');
         var actionInput = document.getElementById('action');
         var multilineInput = document.getElementById('multiline');

demos/textfield.html

@@ -176,7 +176,7 @@ <h2>Full-Width Textfields</h2>
           '.mdl-textfield:not([data-demo-no-auto-js])'
         );
         for (var i = 0, tf; tf = tfs[i]; i++) {
-          mdl.Textfield.attachTo(tf);
+          mdl.textfield.MDLTextfield.attachTo(tf);
         }
       })();
     </script>
@@ -185,7 +185,7 @@ <h2>Full-Width Textfields</h2>
         var section = document.getElementById('demo-textfield-wrapper');
         var tfRoot = section.querySelector('.mdl-textfield');
         var helptext = section.querySelector('.mdl-textfield-helptext');
-        var tf = new mdl.Textfield(tfRoot);
+        var tf = new mdl.textfield.MDLTextfield(tfRoot);
 
         document.getElementById('disable').addEventListener('change', function(evt) {
           var target = evt.target;
@@ -236,7 +236,7 @@ <h2>Full-Width Textfields</h2>
       (function() {
         var section = document.getElementById('demo-textfield-multiline-wrapper');
         var tfRoot = section.querySelector('.mdl-textfield');
-        var tf = new mdl.Textfield(tfRoot);
+        var tf = new mdl.textfield.MDLTextfield(tfRoot);
         document.getElementById('multi-disable').addEventListener('change', function(evt) {
           var target = evt.target;
           tf.disabled = target.checked;
@@ -264,8 +264,8 @@ <h2>Full-Width Textfields</h2>
         var section = document.getElementById('demo-fullwidth-wrapper');
         var tfRoot = section.querySelector('.mdl-textfield');
         var tfMultiRoot = section.querySelector('.mdl-textfield--multiline');
-        var tf = new mdl.Textfield(tfRoot);
-        var tfMulti = new mdl.Textfield(tfMultiRoot);
+        var tf = new mdl.textfield.MDLTextfield(tfRoot);
+        var tfMulti = new mdl.textfield.MDLTextfield(tfMultiRoot);
 
         document.getElementById('fullwidth-disable').addEventListener('change', function(evt) {
           var target = evt.target;

examples/angular2/src/app/app.module.ts

@@ -6,6 +6,7 @@ import { RouterModule } from '@angular/router';
 import { SeedApp } from './seed-app';
 import { appRoutes } from './app.routs';
 import { Home } from './components/home';
+import { FormFieldModule } from './components/form-field';
 import { CheckboxModule } from './components/checkbox';
 
 
@@ -14,6 +15,7 @@ import { CheckboxModule } from './components/checkbox';
     BrowserModule,
     FormsModule,
     RouterModule.forRoot(appRoutes),
+    FormFieldModule,
     CheckboxModule
   ],
   declarations: [

examples/angular2/src/app/components/checkbox/index.ts

@@ -2,18 +2,16 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { CheckboxComponent } from './checkbox';
-import { CheckboxWrapperComponent } from './checkbox-wrapper';
 import { CheckboxLabelDirective } from './checkbox-label';
 
 const CHECKBOX_COMPONENTS = [
   CheckboxComponent,
-  CheckboxLabelDirective,
-  CheckboxWrapperComponent
+  CheckboxLabelDirective
 ];
 
 @NgModule({
   imports: [FormsModule],
   exports: [CHECKBOX_COMPONENTS],
   declarations: [CHECKBOX_COMPONENTS],
 })
-export class CheckboxModule {}
+export class CheckboxModule {}