reorg: Tag mdl-repeat changed to Attribute, Tag mdl-property changed …

…to Attribute (mdl-observe)
MikeMitterer · Jul 22, 2015 · c016336 · c016336
1 parent 7a57dcf
commit c016336
Show file tree

Hide file tree

Showing 46 changed files with 249 additions and 211 deletions.
diff --git a/example/mdlx_dnd/.sitegen/html/_content/index.html b/example/mdlx_dnd/.sitegen/html/_content/index.html
@@ -10,13 +10,13 @@ <h2>Drag & Drop (experimental)</h2>
         <div class="choose ">
 
             <h6>Choose language</h6>
-                <mdl-repeat class="source langbox mdl-dnd__drag-container" for-each="language in languages">
+                <div mdl-repeat="language in languages" class="source langbox mdl-dnd__drag-container" >
                     {{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
                     <mdl-draggable template class="language" consumes="language" drop-zone="{{language.type}}">
                         {{language.name}}
                     </mdl-draggable>
                     |= {{ }} =| {{! ----- Turn on mustache ---- }}
-                </mdl-repeat>
+                </div>
         </div>
 
         <div class="accept">
@@ -28,13 +28,13 @@ <h6>Programming languages</h6>
 
                     <!-- programming language item becomes a 'draggable' item and can be dragged to 'trash' -->
                     <!-- mdl-repeat takes its for-each param from the next SCOPE-AWARE-Parent (mld-dropzone is not SCOPE-AWARE) -->
-                    <mdl-repeat for-each="language in programming" class="mdl-dnd__drag-container">
+                    <div mdl-repeat="language in programming" class="mdl-dnd__drag-container">
                         {{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
                         <mdl-draggable template class="language" consumes="language" drop-zone="trash">
                             {{language.name}}
                         </mdl-draggable>
                         |= {{ }} =| {{! ----- Turn on mustache ---- }}
-                    </mdl-repeat>
+                    </div>
                 </mdl-dropzone>
             </div>
 
@@ -46,13 +46,13 @@ <h6>Natural languages</h6>
 
                     <!-- natural language item becomes a 'draggable' item and can be dragged to 'trash' -->
                     <!-- mdl-repeat takes its for-each param from the next SCOPE-AWARE-Parent (mld-dropzone is not SCOPE-AWARE) -->
-                    <mdl-repeat for-each="language in natural" class="mdl-dnd__drag-container">
+                    <div mdl-repeat="language in natural" class="mdl-dnd__drag-container">
                         {{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
                         <mdl-draggable template class="language" consumes="language" drop-zone="trash">
                             {{language.name}}
                         </mdl-draggable>
                         |= {{ }} =| {{! ----- Turn on mustache ---- }}
-                    </mdl-repeat>
+                    </div>
                 </mdl-dropzone>
             </div>
         </div>

diff --git a/example/mdlx_dnd/web/index.html b/example/mdlx_dnd/web/index.html
@@ -54,13 +54,13 @@ <h2>Drag & Drop (experimental)</h2>
     <div class="danddcontainer">
         <div class="choose ">
             <h6>Choose language</h6>
-                <mdl-repeat class="source langbox mdl-dnd__drag-container" for-each="language in languages">
+                <div mdl-repeat="language in languages" class="source langbox mdl-dnd__drag-container" >
 
                     <mdl-draggable template class="language" consumes="language" drop-zone="{{language.type}}">
                         {{language.name}}
                     </mdl-draggable>
 
-                </mdl-repeat>
+                </div>
         </div>
         <div class="accept">
             <div class="langbox">
@@ -69,13 +69,13 @@ <h6>Programming languages</h6>
                               on-drop-success="addToProgrammingLanguages(data)">
                     <!-- programming language item becomes a 'draggable' item and can be dragged to 'trash' -->
                     <!-- mdl-repeat takes its for-each param from the next SCOPE-AWARE-Parent (mld-dropzone is not SCOPE-AWARE) -->
-                    <mdl-repeat for-each="language in programming" class="mdl-dnd__drag-container">
+                    <div mdl-repeat="language in programming" class="mdl-dnd__drag-container">
 
                         <mdl-draggable template class="language" consumes="language" drop-zone="trash">
                             {{language.name}}
                         </mdl-draggable>
 
-                    </mdl-repeat>
+                    </div>
                 </mdl-dropzone>
             </div>
             <div class="langbox">
@@ -84,13 +84,13 @@ <h6>Natural languages</h6>
                               on-drop-success="addToNaturalLanguages(data)">
                     <!-- natural language item becomes a 'draggable' item and can be dragged to 'trash' -->
                     <!-- mdl-repeat takes its for-each param from the next SCOPE-AWARE-Parent (mld-dropzone is not SCOPE-AWARE) -->
-                    <mdl-repeat for-each="language in natural" class="mdl-dnd__drag-container">
+                    <div mdl-repeat="language in natural" class="mdl-dnd__drag-container">
 
                         <mdl-draggable template class="language" consumes="language" drop-zone="trash">
                             {{language.name}}
                         </mdl-draggable>
 
-                    </mdl-repeat>
+                    </div>
                 </mdl-dropzone>
             </div>
         </div>

diff --git a/example/spa_model/.sitegen/html/_content/index.html b/example/spa_model/.sitegen/html/_content/index.html
@@ -60,13 +60,13 @@
     </div>
 
     <div class="output mdl-color--200 mdl-color-text--white">
-        Text in TextField: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.minimodel"></mdl-property><br>
+        Text in TextField: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.minimodel"></span><br>
-        OS1: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.os1"></mdl-property><br>
+        OS1: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.os1"></span><br>
-        OS2: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.os2"></mdl-property><br>
+        OS2: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.os2"></span><br>
-        WIFI: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.wifi"></mdl-property><br>
+        WIFI: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.wifi"></span><br>
-        Light #1: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.lights[0]"></mdl-property><br>
+        Light #1: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.lights[0]"></span><br>
-        Light #2: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.lights[1]"></mdl-property><br>
+        Light #2: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.lights[1]"></span><br>
-        Intensity: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.intensity"></mdl-property><br>
+        Intensity: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.intensity"></span><br>
     </div>
 
 </div>

diff --git a/example/spa_model/web/index.html b/example/spa_model/web/index.html
@@ -102,13 +102,13 @@
                mdl-model="modelTest.intensity"/>
     </div>
     <div class="output mdl-color--200 mdl-color-text--white">
-        Text in TextField: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.minimodel"></mdl-property><br>
+        Text in TextField: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.minimodel"></span><br>
-        OS1: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.os1"></mdl-property><br>
+        OS1: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.os1"></span><br>
-        OS2: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.os2"></mdl-property><br>
+        OS2: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.os2"></span><br>
-        WIFI: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.wifi"></mdl-property><br>
+        WIFI: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.wifi"></span><br>
-        Light #1: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.lights[0]"></mdl-property><br>
+        Light #1: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.lights[0]"></span><br>
-        Light #2: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.lights[1]"></mdl-property><br>
+        Light #2: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.lights[1]"></span><br>
-        Intensity: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.intensity"></mdl-property><br>
+        Intensity: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.intensity"></span><br>
     </div>
 </div>
 

diff --git a/example/spa_observe/.sitegen/html/_content/index.html b/example/spa_observe/.sitegen/html/_content/index.html
@@ -8,18 +8,18 @@
         If you "REMOVE" "German" - it will be replace with "Austrian"
     </p>
     <p>
-        Now it's: <mdl-property observe="time"></mdl-property><br>
+        Now it's: <span mdl-observe="time"></span><br>
-        Nr. of records: <mdl-property observe="records"></mdl-property><br>
+        Nr. of records: <span mdl-observe="records"></span><br>
     </p>
-    <mdl-repeat for-each="language in languages">
+    <div mdl-repeat="language in languages">
         {{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
         <div template class="language" >
             Language: {{language.name}} ({{language.type}})
             <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
                     data-mdl-click="remove({{language.name}})">Remove</button>
         </div>
         |= {{ }} =| {{! ----- Turn on mustache ---- }}
-    </mdl-repeat>
+    </div>
 </div>
 
 
diff --git a/example/spa_observe/web/index.html b/example/spa_observe/web/index.html
@@ -55,18 +55,18 @@
         If you "REMOVE" "German" - it will be replace with "Austrian"
     </p>
     <p>
-        Now it's: <mdl-property observe="time"></mdl-property><br>
+        Now it's: <span mdl-observe="time"></span><br>
-        Nr. of records: <mdl-property observe="records"></mdl-property><br>
+        Nr. of records: <span mdl-observe="records"></span><br>
     </p>
-    <mdl-repeat for-each="language in languages">
+    <div mdl-repeat="language in languages">
 
         <div template class="language" >
             Language: {{language.name}} ({{language.type}})
             <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
                     data-mdl-click="remove({{language.name}})">Remove</button>
         </div>
 
-    </mdl-repeat>
+    </div>
 </div>
 
                 </section>

diff --git a/example/spa_repeat/.sitegen/html/_content/index.html b/example/spa_repeat/.sitegen/html/_content/index.html
@@ -3,7 +3,7 @@
 sampleurl: https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/spa_repeat/web
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div class="demo-preview-block">
-    <mdl-repeat id="main">
+    <div mdl-repeat id="main">
         {{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
         <div template >
             <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="check-{{id}}">
@@ -15,7 +15,7 @@
                     data-mdl-click="remove()">Remove</button>
         </div>
         |= {{ }} =| {{! ----- Turn on mustache ---- }}
-    </mdl-repeat>
+    </div>
 </div>
 
 
diff --git a/example/spa_repeat/web/index.html b/example/spa_repeat/web/index.html
@@ -50,7 +50,7 @@
             <div class="content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
                 <section class="demo-section demo-section--repeat">
                     <div class="demo-preview-block">
-    <mdl-repeat id="main">
+    <div mdl-repeat id="main">
 
         <div template >
             <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="check-{{id}}">
@@ -62,7 +62,7 @@
                     data-mdl-click="remove()">Remove</button>
         </div>
 
-    </mdl-repeat>
+    </div>
 </div>
 
                 </section>

diff --git a/example/spa_todo/.sitegen/html/_content/index.html b/example/spa_todo/.sitegen/html/_content/index.html
@@ -11,8 +11,8 @@
     <button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
         Add
     </button>
-    <mdl-property observe="nrOfItemsDone"></mdl-property> /
+    <span mdl-observe="nrOfItemsDone"></span> /
-    <mdl-property observe="nrOfItems"></mdl-property>
+    <span mdl-observe="nrOfItems"></span>
 
     <div id="todo" class="todo-items"></div>
 

diff --git a/example/spa_todo/lib/src/ToDoItem.dart b/example/spa_todo/lib/src/ToDoItem.dart
@@ -136,7 +136,7 @@ class ToDoItemComponent extends MdlTemplateComponent implements ScopeAware {
 
     @override
     String template = """
-        <mdl-repeat for-each="item in items">
+        <div mdl-repeat="item in items">
             {{! ----- Turn off default mustache interpretation ---- }} {{= | | =}}
             <div template class="row">
                 <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="check{{item.id}}">
@@ -154,7 +154,7 @@ class ToDoItemComponent extends MdlTemplateComponent implements ScopeAware {
                 </button>
             </div>
             |= {{ }} =| {{! ----- Turn on mustache ---- }}
-        </mdl-repeat>
+        </div>
         """.trim().replaceAll(new RegExp(r"\s+")," ");
 }
 

diff --git a/example/spa_todo/web/index.html b/example/spa_todo/web/index.html
@@ -57,8 +57,8 @@
     <button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
         Add
     </button>
-    <mdl-property observe="nrOfItemsDone"></mdl-property> /
+    <span mdl-observe="nrOfItemsDone"></span> /
-    <mdl-property observe="nrOfItems"></mdl-property>
+    <span mdl-observe="nrOfItems"></span>
     <div id="todo" class="todo-items"></div>
 </div>
 <!-- <script type="application/dart" src="main.dart"></script> -->

diff --git a/example/styleguide/.sitegen/html/_content/views/accordion.html b/example/styleguide/.sitegen/html/_content/views/accordion.html
@@ -4,22 +4,22 @@
     </div>
       <div class="demo-preview-block">
         <h5>Multiple sections can be open at the same time</h5>
-        <div class="mdl-accordion-group mdl-js-accordion mdl-js-ripple-effect">
+        <div class="mdl-accordion-group mdl-js-ripple-effect">
-            <div class="mdl-accordion">
+            <div class="mdl-accordion mdl-js-accordion">
                 <label class="mdl-accordion__label">Panel 1<i class="material-icons indicator">chevron_right</i></label>
                 <div class="mdl-accordion--content">
                     <h5 class="mdl-accordion--header">Header</h5>
                     <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p>
                 </div>
             </div>
-            <div class="mdl-accordion">
+            <div class="mdl-accordion mdl-js-accordion">
                 <label class="mdl-accordion__label">Panel 2<i class="material-icons indicator">chevron_right</i></label>
                 <div class="mdl-accordion--content">
                     <h5 class="mdl-accordion--header">Header</h5>
                     <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p>
                 </div>
             </div>
-            <div class="mdl-accordion">
+            <div class="mdl-accordion mdl-js-accordion">
                 <label class="mdl-accordion__label">Panel 3<i class="material-icons indicator">chevron_right</i></label>
                 <div class="mdl-accordion--content">
                     <h5 class="mdl-accordion--header">Header</h5>
@@ -29,22 +29,22 @@ <h5 class="mdl-accordion--header">Header</h5>
     </div>
     <div class="preview-block sample">
         <h5>Only one section is open</h5>
-        <div class="mdl-accordion-group mdl-js-accordion mdl-accordion--radio-type mdl-js-ripple-effect">
+        <div class="mdl-accordion-group mdl-accordion--radio-type mdl-js-ripple-effect">
-            <div class="mdl-accordion">
+            <div class="mdl-accordion mdl-js-accordion">
                 <label class="mdl-accordion__label">Panel 1<i class="material-icons indicator">chevron_right</i></label>
                 <div class="mdl-accordion--content">
                     <h5 class="mdl-accordion--header">Header</h5>
                     <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p>
                 </div>
             </div>
-            <div class="mdl-accordion">
+            <div class="mdl-accordion mdl-js-accordion">
                 <label class="mdl-accordion__label">Panel 2<i class="material-icons indicator">chevron_right</i></label>
                 <div class="mdl-accordion--content">
                     <h5 class="mdl-accordion--header">Header</h5>
                     <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p>
                 </div>
             </div>
-            <div class="mdl-accordion">
+            <div class="mdl-accordion mdl-js-accordion">
                 <label class="mdl-accordion__label">Panel 3<i class="material-icons indicator">chevron_right</i></label>
                 <div class="mdl-accordion--content">
                     <h5 class="mdl-accordion--header">Header</h5>