Update header slots for Vue components (#1502)

There aren't many benefits from having internal _header slots. Furthermore, it is causing a minor bug in box header slot. Let's convert them to just header for conciseness and to prevent related bugs in the future.
MarkBind · Mar 8, 2021 · 640d18b · 640d18b
1 parent 03cd39d
commit 640d18b
Show file tree

Hide file tree

Showing 16 changed files with 74 additions and 81 deletions.
diff --git a/packages/cli/test/functional/test_site/expected/testAntiFOUCStyles.html b/packages/cli/test/functional/test_site/expected/testAntiFOUCStyles.html
@@ -185,15 +185,15 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
         <navbar type="dark" class=" temp-navbar">
           <li><a href="/" class="nav-link">One</a></li>
           <li><a href="/" class="nav-link">Two</a></li>
-          <dropdown class="nav-link temp-dropdown"><template #_header>Dropdown</template>
+          <dropdown class="nav-link temp-dropdown"><template #header>Dropdown</template>
             <li><a class="dropdown-item" href="/">Dropdown One</a></li>
             <li><a class="dropdown-item" href="/">Dropdown Two</a></li>
           </dropdown>
           <div class="nav-link temp-dropdown-placeholder"></div>
         </navbar>
 
         <p><strong>Test dropdown in body with text and class attributes</strong></p>
-        <dropdown class="test-class temp-dropdown"><template #_header>Test One</template>
+        <dropdown class="test-class temp-dropdown"><template #header>Test One</template>
           <li><a class="dropdown-item" href="/">Dropdown One</a></li>
           <li><a class="dropdown-item" href="/">Dropdown Two</a></li>
         </dropdown>

diff --git a/packages/cli/test/functional/test_site_algolia_plugin/expected/index.html b/packages/cli/test/functional/test_site_algolia_plugin/expected/index.html
@@ -30,7 +30,7 @@
     <p>
     <p><strong>Test Algolia plugin adds algolia-no-index classes</strong></p>
     <p><strong>Dropdowns should have algolia-no-index class</strong></p>
-    <dropdown class="temp-dropdown algolia-no-index"><template #_header>Dropdown</template>
+    <dropdown class="temp-dropdown algolia-no-index"><template #header>Dropdown</template>
       <li><a class="dropdown-item" href="/">One</a></li>
       <li><a class="dropdown-item" href="/">Two</a></li>
     </dropdown>
@@ -73,41 +73,41 @@
       </template></question>
     <p><strong>Tabs except first tab should have algolia-no-index class</strong></p>
     <tabs>
-      <tab><template #_header>First Tab</template>
+      <tab><template #header>First Tab</template>
         Content<br>Content<br>Content<br>Content
       </tab>
-      <tab class="algolia-no-index"><template #_header>Second Tab</template>
+      <tab class="algolia-no-index"><template #header>Second Tab</template>
         Content<br>Content<br>Content<br>Content
       </tab>
     </tabs>
     <tabs>
-      <tab-group><template #_header>First Group</template>
-        <tab><template #_header>First Tab</template>
+      <tab-group><template #header>First Group</template>
+        <tab><template #header>First Tab</template>
           Content<br>Content<br>Content<br>Content
         </tab>
-        <tab class="algolia-no-index"><template #_header>Second Tab</template>
+        <tab class="algolia-no-index"><template #header>Second Tab</template>
           Content<br>Content<br>Content<br>Content
         </tab>
       </tab-group>
-      <tab-group class="algolia-no-index"><template #_header>Second Group</template>
-        <tab><template #_header>First Tab</template>
+      <tab-group class="algolia-no-index"><template #header>Second Group</template>
+        <tab><template #header>First Tab</template>
           Content<br>Content<br>Content<br>Content
         </tab>
-        <tab class="algolia-no-index"><template #_header>Second Tab</template>
+        <tab class="algolia-no-index"><template #header>Second Tab</template>
           Content<br>Content<br>Content<br>Content
         </tab>
       </tab-group>
     </tabs>
     <tabs>
-      <tab-group><template #_header>Outer One</template>
-        <tab><template #_header>First Tab</template>
+      <tab-group><template #header>Outer One</template>
+        <tab><template #header>First Tab</template>
           Content<br>Content<br>Content<br>Content
         </tab>
-        <tab class="algolia-no-index"><template #_header>Second Tab</template>
+        <tab class="algolia-no-index"><template #header>Second Tab</template>
           Content<br>Content<br>Content<br>Content
         </tab>
       </tab-group>
-      <tab><template #_header>Outer Two</template>
+      <tab><template #header>Outer Two</template>
         Content<br>Content<br>Content<br>Content
       </tab>
     </tabs>

diff --git a/packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic1.html b/packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic1.html
@@ -34,7 +34,7 @@
         <template #brand><a href="/index.html" title="Home" class="navbar-brand">Your Logo</a></template>
         <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
         <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-        <dropdown class="nav-link temp-dropdown"><template #_header>Topic 3</template>
+        <dropdown class="nav-link temp-dropdown"><template #header>Topic 3</template>
           <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
           <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
         </dropdown>

diff --git a/packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic2.html b/packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic2.html
@@ -34,7 +34,7 @@
         <template #brand><a href="/index.html" title="Home" class="navbar-brand">Your Logo</a></template>
         <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
         <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-        <dropdown class="nav-link temp-dropdown"><template #_header>Topic 3</template>
+        <dropdown class="nav-link temp-dropdown"><template #header>Topic 3</template>
           <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
           <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
         </dropdown>

diff --git a/packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic3a.html b/packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
@@ -34,7 +34,7 @@
         <template #brand><a href="/index.html" title="Home" class="navbar-brand">Your Logo</a></template>
         <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
         <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-        <dropdown class="nav-link temp-dropdown"><template #_header>Topic 3</template>
+        <dropdown class="nav-link temp-dropdown"><template #header>Topic 3</template>
           <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
           <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
         </dropdown>

diff --git a/packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic3b.html b/packages/cli/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
@@ -34,7 +34,7 @@
         <template #brand><a href="/index.html" title="Home" class="navbar-brand">Your Logo</a></template>
         <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
         <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-        <dropdown class="nav-link temp-dropdown"><template #_header>Topic 3</template>
+        <dropdown class="nav-link temp-dropdown"><template #header>Topic 3</template>
           <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
           <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
         </dropdown>

diff --git a/packages/cli/test/functional/test_site_templates/test_default/expected/index.html b/packages/cli/test/functional/test_site_templates/test_default/expected/index.html
@@ -34,7 +34,7 @@
         <template #brand><a href="/index.html" title="Home" class="navbar-brand">Your Logo</a></template>
         <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
         <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
-        <dropdown class="nav-link temp-dropdown"><template #_header>Topic 3</template>
+        <dropdown class="nav-link temp-dropdown"><template #header>Topic 3</template>
           <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
           <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
         </dropdown>
@@ -151,17 +151,17 @@ <h2 id="sub-heading-1-2"><span id="sub-heading-1-2" class="anchor"></span>Sub He
         <div class="block-embed block-embed-service-youtube"><iframe type="text/html" src="//www.youtube.com/embed/v40b3ExbM0c" frameborder="0" width="640" height="390" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
         <p><strong>Tabs:</strong></p>
         <tabs>
-          <tab><template #_header>Tab X</template>
+          <tab><template #header>Tab X</template>
             Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
           </tab>
-          <tab><template #_header>Tab Y</template>
+          <tab><template #header>Tab Y</template>
             ...
           </tab>
-          <tab-group><template #_header>Tab group</template>
-            <tab><template #_header>Tab Y.1</template>
+          <tab-group><template #header>Tab group</template>
+            <tab><template #header>Tab Y.1</template>
               ...
             </tab>
-            <tab><template #_header>Tab Y.2</template>
+            <tab><template #header>Tab Y.2</template>
               ...
             </tab>
           </tab-group>
@@ -178,17 +178,17 @@ <h1 id="heading-2"><span id="heading-2" class="anchor"></span>Heading 2<a class=
         <box type="warning" dismissible>
           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.
         </box>
-        <box type="tip"><template #_header>
+        <box type="tip"><template #header>
             <p>Tip box heading</p>
           </template>
           tip
         </box>
-        <box type="success"><template #_header>
+        <box type="success"><template #header>
             <p>Tip box heading</p>
           </template>
           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.
         </box>
-        <box type="important" dismissible><template #_header>
+        <box type="important" dismissible><template #header>
             <p>Tip box heading</p>
           </template>
           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.

diff --git a/packages/core/src/html/NodeProcessor.js b/packages/core/src/html/NodeProcessor.js
@@ -106,8 +106,7 @@ class NodeProcessor {
 
   /**
    * Processes the markdown attribute of the provided element, inserting the corresponding <slot> child
-   * if there is no pre-existing slot child with the name of the attribute present. For existing <slot>
-   * children, the HTML node tag name will be converted to "template".
+   * if there is no pre-existing slot child with the name of the attribute present.
    * @param node Element to process
    * @param attribute Attribute name to process
    * @param isInline Whether to process the attribute with only inline markdown-it rules
@@ -454,7 +453,7 @@ class NodeProcessor {
    */
 
   _processTabAttributes(node) {
-    this._processAttributeWithoutOverride(node, 'header', true, '_header');
+    this._processAttributeWithoutOverride(node, 'header', true, 'header');
   }
 
   /*
@@ -470,9 +469,9 @@ class NodeProcessor {
     NodeProcessor._warnDeprecatedAttributes(node, { heading: 'header' });
 
     this._processAttributeWithoutOverride(node, 'icon', true, 'icon');
-    this._processAttributeWithoutOverride(node, 'header', false, '_header');
+    this._processAttributeWithoutOverride(node, 'header', false, 'header');
 
-    this._processAttributeWithoutOverride(node, 'heading', false, '_header');
+    this._processAttributeWithoutOverride(node, 'heading', false, 'header');
   }
 
   /*
@@ -500,10 +499,10 @@ class NodeProcessor {
     NodeProcessor._warnConflictingAttributes(node, 'header', ['text']);
     // header attribute takes priority over text attribute if both 'text' and 'header' is used
     if (_.has(node.attribs, 'header')) {
-      this._processAttributeWithoutOverride(node, 'header', true, '_header');
+      this._processAttributeWithoutOverride(node, 'header', true, 'header');
       delete node.attribs.text;
     } else {
-      this._processAttributeWithoutOverride(node, 'text', true, '_header');
+      this._processAttributeWithoutOverride(node, 'text', true, 'header');
     }
   }