lesson 14: named slots, default slots, and default content.

.idea/php.xml

@@ -1,4 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="PhpProjectSharedConfiguration" php_language_level="7" />
+  <component name="PhpUnit">
+    <phpunit_settings>
+      <PhpUnitSettings load_method="CUSTOM_LOADER" />
+    </phpunit_settings>
+  </component>
 </project>

.idea/workspace.xml

@@ -2,7 +2,12 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="0f813586-48e2-4acf-8923-221617ab434f" name="Default" comment="">
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/lesson13/code.js" afterPath="$PROJECT_DIR$/lesson13/code.js" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson14/code.js" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson14/index.html" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson14/styles.css" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/php.xml" afterPath="$PROJECT_DIR$/.idea/php.xml" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/lesson13/index.html" afterPath="$PROJECT_DIR$/lesson13/index.html" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="TRACKING_ENABLED" value="true" />
@@ -13,28 +18,7 @@
   </component>
   <component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
   <component name="FileEditorManager">
-    <leaf>
-      <file leaf-file-name="index.html" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/lesson13/index.html">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="225">
-              <caret line="14" column="32" lean-forward="false" selection-start-line="14" selection-start-column="32" selection-end-line="14" selection-end-column="32" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="code.js" pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/lesson13/code.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="465">
-              <caret line="31" column="4" lean-forward="true" selection-start-line="31" selection-start-column="4" selection-end-line="31" selection-end-column="4" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-    </leaf>
+    <leaf />
   </component>
   <component name="FindInProjectRecents">
     <findStrings>
@@ -85,8 +69,10 @@
         <option value="$PROJECT_DIR$/lesson11/code.js" />
         <option value="$PROJECT_DIR$/lesson12/index.html" />
         <option value="$PROJECT_DIR$/lesson12/code.js" />
-        <option value="$PROJECT_DIR$/lesson13/index.html" />
         <option value="$PROJECT_DIR$/lesson13/code.js" />
+        <option value="$PROJECT_DIR$/lesson13/index.html" />
+        <option value="$PROJECT_DIR$/lesson14/code.js" />
+        <option value="$PROJECT_DIR$/lesson14/index.html" />
       </list>
     </option>
   </component>
@@ -99,6 +85,9 @@
   <component name="NodeModulesDirectoryManager">
     <handled-path value="$PROJECT_DIR$/node_modules" />
   </component>
+  <component name="PhpServers">
+    <servers />
+  </component>
   <component name="PhpWorkspaceProjectConfiguration" backward_compatibility_performed="true" interpreter_name="PHP 7.0 Brew" />
   <component name="ProjectFrameBounds">
     <option name="y" value="23" />
@@ -143,7 +132,7 @@
               <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
             </PATH_ELEMENT>
             <PATH_ELEMENT>
-              <option name="myItemId" value="lesson13" />
+              <option name="myItemId" value="lesson14" />
               <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
             </PATH_ELEMENT>
           </PATH>
@@ -302,13 +291,12 @@
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="12488000" />
+    <option name="totallyTimeSpent" value="13685000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1440" height="877" extended-state="6" />
-    <editor active="true" />
     <layout>
-      <window_info id="Project" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.2532189" sideWeight="0.5" order="5" side_tool="false" content_ui="combo" />
+      <window_info id="Project" active="true" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.2532189" sideWeight="0.5" order="5" side_tool="false" content_ui="combo" />
       <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="10" side_tool="false" content_ui="tabs" />
       <window_info id="Docker" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
       <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="true" content_ui="tabs" />
@@ -717,18 +705,34 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/lesson13/code.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="255">
+          <caret line="17" column="28" lean-forward="true" selection-start-line="17" selection-start-column="28" selection-end-line="17" selection-end-column="28" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/lesson13/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="225">
-          <caret line="14" column="32" lean-forward="false" selection-start-line="14" selection-start-column="32" selection-end-line="14" selection-end-column="32" />
+        <state relative-caret-position="210">
+          <caret line="13" column="9" lean-forward="true" selection-start-line="13" selection-start-column="9" selection-end-line="13" selection-end-column="9" />
           <folding />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/lesson13/code.js">
+    <entry file="file://$PROJECT_DIR$/lesson14/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="465">
-          <caret line="31" column="4" lean-forward="true" selection-start-line="31" selection-start-column="4" selection-end-line="31" selection-end-column="4" />
+        <state relative-caret-position="495">
+          <caret line="27" column="38" lean-forward="true" selection-start-line="27" selection-start-column="38" selection-end-line="27" selection-end-column="38" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/lesson14/code.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="345">
+          <caret line="23" column="0" lean-forward="false" selection-start-line="21" selection-start-column="0" selection-end-line="23" selection-end-column="0" />
           <folding />
         </state>
       </provider>

lesson13/index.html

@@ -9,7 +9,7 @@
   </head>
   <body>
     <nav>
-      <h1><span class="index">12</span>Component communication 1: custom events</h1>
+      <h1><span class="index">13</span>Component communication 2: event dispatcher</h1>
       <ul>
         <li><a href="../lesson12">Prev</a></li>
         <li><a href="../lesson14">Next</a></li>

lesson14/code.js

@@ -0,0 +1,39 @@
+Vue.component('modal', {
+  methods: {
+  },
+
+  template: `
+<div class="modal is-active">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">
+        <slot name="header"></slot>
+      </p>
+      <button class="delete"></button>
+    </header>  
+    
+    <section class="modal-card-body">
+      <slot>Default body</slot>
+    </section>
+    
+    <footer class="modal-card-foot">
+      <slot name="footer">
+        <a class="button is-primary">OK</a>
+        <a class="button">Cancel</a>      
+      </slot>
+    </footer>
+  </div>
+</div>  
+`,
+
+});
+
+const app = new Vue({
+  el: '#root',
+  data: {
+  },
+
+  methods: {
+  }
+});

lesson14/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css" />
+    <link rel="stylesheet" href="../styles.css" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <nav>
+      <h1><span class="index">14</span>Named slots in a nutshell</h1>
+      <ul>
+        <li><a href="../lesson13">Prev</a></li>
+        <li><a href="../lesson15">Next</a></li>
+      </ul>
+    </nav>
+
+    <div id="root" class="container">
+      <modal>
+        <template slot="header">Modal title</template>
+        <!-- Default slot can use a default value. Comments don't count. -->
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+        <!-- To use default content on a non-default slot, just don't emit it -->
+        <template slot="footer">
+          <a class="button is-primary">Save changes</a>
+          <a class="button">Cancel</a>
+        </template>
+      </modal>
+    </div>
+
+    <script src="../lib/vue-2.1.3.js"></script>
+    <script src="code.js"></script>
+  </body>
+</html>

lesson14/styles.css

@@ -0,0 +1,19 @@
+body {
+  padding-top: 40px;
+}
+
+nav li {
+  display: inline;
+}
+
+nav h1 span {
+  margin-right: 0.3em;
+}
+
+button {
+  display: block;
+}
+
+[v-cloak] {
+  display: none;
+}