Home Esplora Aiuto
Registrati Accedi
vuejs
/
vue
mirror da https://github.com/vuejs/vue.git
2
0
Forka 0
File Problemi 0 Wiki
Sfoglia il codice sorgente

update examples and fix tests for <slot>

Evan You 10 anni fa
parent
f865f3f2e5
commit
144fe50c8f
10 ha cambiato i file con 52 aggiunte e 206 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 16 15
      examples/modal/index.html
  2. BIN
      examples/slider/images/arch.jpg
  3. BIN
      examples/slider/images/grooves.jpg
  4. BIN
      examples/slider/images/rock.jpg
  5. BIN
      examples/slider/images/sunset.jpg
  6. 0 73
      examples/slider/index.html
  7. 0 89
      examples/slider/style.css
  8. 21 2
      src/element-directives/slot.js
  9. 0 27
      test/e2e/slider.js
  10. 15 0
      test/unit/specs/element-directives/slot_spec.js

+ 16 - 15
examples/modal/index.html
Vedi File 

@@ -12,25 +12,28 @@
 
       <div class="modal-mask" v-show="show" v-transition="modal">
 
         <div class="modal-wrapper">
 
           <div class="modal-container">
 
-            <content select=".modal-header">
 
-              <div class="modal-header">
 
+
 
+            <div class="modal-header">
 
+              <slot name="header">
 
                 default header
 
-              </div>
 
-            </content>
 
-            <content select=".modal-body">
 
-              <div class="modal-body">
 
+              </slot>
 
+            </div>
 
+            
+            <div class="modal-body">
 
+              <slot name="body">
 
                 default body
 
-              </div>
 
-            </content>
 
-            <content select=".modal-footer">
 
-              <div class="modal-footer">
 
+              </slot>
 
+            </div>
 
+
 
+            <div class="modal-footer">
 
+              <slot name="footer">
 
                 default footer
 
                 <button class="modal-default-button"
 
                   v-on="click: show = false">
 
                   OK
 
                 </button>
 
-              </div>
 
-            </content>
 
+              </slot>
 
+            </div>
 
           </div>
 
         </div>
 
       </div>
 
@@ -59,9 +62,7 @@
 
           you can use custom content here to overwrite
 
           default content
 
         -->
 
-        <div class="modal-header">
 
-          <h3>custom header</h3>
 
-        </div>
 
+        <h3 slot="header">custom header</h3>
 
       </modal>
 
     </div>

BIN
examples/slider/images/arch.jpg
Vedi File


BIN
examples/slider/images/grooves.jpg
Vedi File


BIN
examples/slider/images/rock.jpg
Vedi File


BIN
examples/slider/images/sunset.jpg
Vedi File


+ 0 - 73
examples/slider/index.html
Vedi File 

@@ -1,73 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-  <head>
 
-    <meta charset="utf-8">
 
-    <title>Vue.js slider component example</title>
 
-    <link rel="stylesheet" href="style.css">
 
-    <script src="../../dist/vue.js"></script>
 
-  </head>
 
-  <body>
 
-
 
-    <!-- template for the slider component -->
 
-    <script type="text/x-template" id="img-slider-template">
 
-      <div id="slider">
 
-        <input checked="" type="radio" name="slider" id="slide1" selected="false">
 
-        <input type="radio" name="slider" id="slide2" selected="false">
 
-        <input type="radio" name="slider" id="slide3" selected="false">
 
-        <input type="radio" name="slider" id="slide4" selected="false">
 
-        <div id="slides">
 
-          <div id="overflow">
 
-            <div class="inner">
 
-              <article>
 
-                <content select="img:nth-of-type(1)"></content>
 
-              </article>
 
-              <article>
 
-                <content select="img:nth-of-type(2)"></content>
 
-              </article>
 
-              <article>
 
-                <content select="img:nth-of-type(3)"></content>
 
-              </article>
 
-              <article>
 
-                <content select="img:nth-of-type(4)"></content>
 
-              </article>
 
-            </div> <!-- .inner -->
 
-          </div> <!-- #overflow -->
 
-        </div>
 
-        <label for="slide1"></label>
 
-        <label for="slide2"></label>
 
-        <label for="slide3"></label>
 
-        <label for="slide4"></label>
 
-      </div>
 
-    </script>
 
-
 
-    <!-- demo root element -->
 
-    <div id="demo">
 
-      <img-slider>
 
-        <img src="images/rock.jpg">
 
-        <img src="images/grooves.jpg">
 
-        <img src="images/arch.jpg">
 
-        <img src="images/sunset.jpg">
 
-      </img-slider>
 
-    </div>
 
-
 
-    <p>
 
-      Vue.js implements WebComponent-compliant &lt;content&gt; insertion point mechanism.
 
-    </p>
 
-    <p>
 
-      Markup and CSS borrowed from <a href="http://css-tricks.com/modular-future-web-components/" target="_blank">CSS Tricks</a>, which is in turn adapted from <a href="http://csscience.com/responsiveslidercss3/" target="_blank">CSScience</a>. Images courtesy of <a href="http://www.flickr.com/photos/eliya" target="_blank">Eliya Selhub</a>
 
-    </p>
 
-
 
-    <script>
 
-      // define slider component
 
-      Vue.component('img-slider', {
 
-        template: '#img-slider-template',
 
-        replace: true
 
-      })
 
-      // boot up demo
 
-      new Vue({
 
-        el: '#demo'
 
-      })
 
-    </script>
 
-
 
-  </body>
 
-</html>

+ 0 - 89
examples/slider/style.css
Vedi File 

@@ -1,89 +0,0 @@
 
-body {
 
-  font-family: 'Helvetica Neue', Arial, sans-serif;
 
-  font-size: 12px;
 
-  color: #393939;
 
-  text-align: center;
 
-}
 
-
 
-* {
 
-  -webkit-box-sizing: border-box;
 
-  -moz-box-sizing: border-box;
 
-  -ms-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-}
 
-
 
-#slider {
 
-  max-width: 600px;
 
-  text-align: center;
 
-  margin: 0 auto;
 
-}
 
-
 
-#overflow {
 
-  width: 100%;
 
-  overflow: hidden;
 
-}
 
-
 
-#slides .inner {
 
-  width: 400%;
 
-}
 
-
 
-#slides .inner {
 
-  -webkit-transform: translateZ(0);
 
-  -moz-transform: translateZ(0);
 
-  -o-transform: translateZ(0);
 
-  -ms-transform: translateZ(0);
 
-  transform: translateZ(0);
 
-
 
-  -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
 
-  -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
 
-  -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
 
-  -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
 
-  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
 
-
 
-  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
 
-  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
 
-  -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
 
-  -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
 
-  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
 
-}
 
-
 
-#slides article {
 
-  width: 25%;
 
-  float: left;
 
-}
 
-
 
-#slide1:checked ~ #slides .inner {
 
-  margin-left: 0;
 
-}
 
-
 
-#slide2:checked ~ #slides .inner {
 
-  margin-left: -100%;
 
-}
 
-
 
-#slide3:checked ~ #slides .inner {
 
-  margin-left: -200%;
 
-}
 
-
 
-#slide4:checked ~ #slides .inner {
 
-  margin-left: -300%;
 
-}
 
-
 
-input[type="radio"] {
 
-  display: none;
 
-}
 
-
 
-label {
 
-  background: #CCC;
 
-  display: inline-block;
 
-  cursor: pointer;
 
-  width: 10px;
 
-  height: 10px;
 
-  border-radius: 5px;
 
-}
 
-
 
-#slide1:checked ~ label[for="slide1"],
 
-#slide2:checked ~ label[for="slide2"],
 
-#slide3:checked ~ label[for="slide3"],
 
-#slide4:checked ~ label[for="slide4"] {
 
-  background: #333;
 
-}

+ 21 - 2
src/element-directives/slot.js
Vedi File 

@@ -1,5 +1,6 @@
 
 var _ = require('../util')
 
-var clone = require('../parsers/template').clone
 
+var config = require('../config')
 
+var templateParser = require('../parsers/template')
 
 
 // This is the elementDirective that handles <content>
 
 // transclusions. It relies on the raw content of an
 
@@ -125,10 +126,28 @@ function extractFragment (nodes, parent, main) {
 
   return frag
 
 
   function append (node) {
 
-    node = clone(node)
 
+    if (_.isTemplate(node) &&
 
+        !hasDirecitve(node, 'if') &&
 
+        !hasDirecitve(node, 'for') &&
 
+        !hasDirecitve(node, 'repeat')) {
 
+      node = templateParser.parse(node)
 
+    }
 
+    node = templateParser.clone(node)
 
     if (node.attributes) {
 
       node.removeAttribute('slot')
 
     }
 
     frag.appendChild(node)
 
   }
 
 }
 
+
 
+/**
 
+ * Check if there is a flow control directive on a template
 
+ * element that is a slot.
 
+ *
 
+ * @param {Node} node
 
+ * @param {String} dir
 
+ */
 
+
 
+function hasDirecitve (node, dir) {
 
+  return node.hasAttribute(config.prefix + dir)
 
+}

+ 0 - 27
test/e2e/slider.js
Vedi File 

@@ -1,27 +0,0 @@
 
-// PhantomJS has pretty poor CSS3 support so we're just
 
-// testing the content transclusion here
 
-
 
-casper.test.begin('slider', 2, function (test) {
 
-
 
-  casper
 
-  .start('../../examples/slider/index.html')
 
-  .then(function () {
 
-    test.assertElementCount('article img', 4)
 
-    test.assertEval(function () {
 
-      var ok = true
 
-      var images = ['rock', 'grooves', 'arch', 'sunset']
 
-      for (var i = 1; i < 5; i++) {
 
-        var img = document.querySelector('article:nth-child(' + i + ')').children[0]
 
-        if (img.src.indexOf(images[i - 1]) < 0) {
 
-          ok = false
 
-        }
 
-      }
 
-      return ok
 
-    })
 
-  })
 
-  // run
 
-  .run(function () {
 
-    test.done()
 
-  })
 
-
 
-})

+ 15 - 0
test/unit/specs/element-directives/slot_spec.js
Vedi File 

@@ -332,4 +332,19 @@ describe('Slot Distribution', function () {
 
     expect(el.innerHTML).toBe('<p>1</p><p>2</p>')
 
   })
 
 
+  it('template slot', function () {
 
+    vm = new Vue({
 
+      el: el,
 
+      template:
 
+        '<test><template slot="test">hello</template></test>',
 
+      components: {
 
+        test: {
 
+          template: '<slot name="test"></slot> world',
 
+          replace: true
 
+        }
 
+      }
 
+    })
 
+    expect(el.innerHTML).toBe('hello world')
 
+  })
 
+
 
 })